Semantic-UI Corner Icon Group

Last Updated : 24 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing and responsive. An icon is a glyph used to represent something else. Semantic UI provides thousands of icons through a complete port of Font Awesome 5.0.8 designed by the Font Awesome team for its standard icon set. These icons serve a very similar function to text on a page and can be formatted like text.

In this article, we will learn about the corner icon group in Semantic UI. The corner icon group is a combination of two or more icons that are layered on top of each other to create a desired icon. To make a corner icon group in Semantic UI, we create a large icon using huge and other icons classes and then add a normal size icon at a corner position using position classes.

Semantic UI corner icon group class:

corner: This class positions the smaller icon to the corner of the bigger icon.

Syntax:

<i class="huge icons">
 <i class="<icon-name> ... icon"></i>
 <i class="top corner <icon-name> icon"></i>
</i>

Example 1: This example demonstrates the basic corner icon groups in Semantic UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
<body style="padding:20px;"> 
    <center> 
        <h1 class="ui header green">GeeksforGeeks</h1> 
        <strong>Semantic UI Icon group</strong> 
        <br> 
        <i class="huge icons"> 
            <i class="red heart icon"></i> 
            <i class="blue corner add icon"></i> 
        </i> 
        <i class="huge icons"> 
            <i class="green user icon"></i> 
            <i class="blue corner close icon"></i> 
        </i> 
        <i class="huge icons"> 
            <i class="yellow share icon"></i> 
            <i class="blue corner help icon"></i> 
        </i> 
    </center> 
</body> 
</html>

Output:

Output

Example 2: This example demonstrates all positions corner icon groups in Semantic UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
<body style="padding:x20px;"> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic UI Icon group</strong> 
        <br> 
        <i class="huge icons"> 
            <i class="red heart icon"></i> 
            <i class="blue top left corner add icon"></i> 
        </i> 
        <i class="huge icons"> 
            <i class="red heart icon"></i> 
            <i class="blue top right corner add icon"></i> 
        </i> 
        <i class="huge icons"> 
            <i class="red heart icon"></i> 
            <i class="blue bottom left corner add icon"></i> 
        </i> 
        <i class="huge icons"> 
            <i class="red heart icon"></i> 
            <i class="blue bottom right corner add icon"></i> 
        </i> 
    </center>  
</body> 
</html>