Semantic-UI Corner Icon Group
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" >w3wiki</ 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:
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" >w3wiki</ 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 > |
Output:
Reference: https://semantic-ui.com/elements/icon.html#/definition#groups