Semantic-UI Label Icon Content

Last Updated : 10 Feb, 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.

A Semantic UI label is used to create meaningful content classifications. In the Semantic UI label, 9 types of labels are offered. You can include 4 types of content namely detail, icon, image, and link.

In this article, we will learn about the Semantic UI Label Content Icon.

Semantic UI Label Content icon is used to include the icon inside the label.

Semantic-UI Label Content icon Class:

icon: This class is used to include the icon inside the label.

Syntax:

<a class="ui label">
  <i class="... icon"></i>
  ...
</a>

Example: The below example illustrate the Semantic UI Label Content Icon using label and icon class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="header ui green"> 
            GeeksforGeeks 
        </h1> 
          
        <strong>Semantic UI Label Icon Content</strong> 
        <br><br> 
          
        <a class="ui label"> 
            <i class="mail large green icon"></i> 
            Mail us about your experience 
        </a> 
        <a class="ui label"> 
            <i class="trash large red icon"></i> 
            Dump the Zunk 
        </a> 
    </center> 
</body> 
  
</html> 