Semantic-UI Label Link Content

Last Updated : 28 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. This framework allows us to use various of its styles and properties to make a website more user-friendly.

A Semantic UI label is used to create meaningful content classifications, labels give descriptions to pieces of content. In the Semantic UI label, 4 types of Content are offered. These are Detail, Icon, Image, and Link types. A label can be a link or contain an item that links, the Link Label is used to add a link or an item that links, such as mail, phone, etc.

Semantic-UI Label Link Content Class:

icon: This class is added to the icon and it links the content or any other site or a page.

Note: For different types of icons, please refer to the link mentioned in the reference.

Syntax:

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

Example 1: The following code demonstrates the label link content using the UI icon class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Link Content</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
      <h1 class="ui header green"> 
      GeeksforGeeks 
    </h1> 
    <strong> 
      Semantic UI Label Link Content 
    </strong> 
    <br/> 
    <a class="ui label"> 
        <i class="phone icon"></i> 1212121212 
    </a> 
</body> 
  
</html>

Output:

Semantic-UI Label Link Content

Example 2: To change the color of the link label, we have to add the color in the class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Link Content</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
      <h1 class="ui header green"> 
      GeeksforGeeks 
    </h1> 
    <strong> 
      Semantic UI Link Content 
    </strong> 
    <br/> 
    <a class="ui green label"> 
        <i class="phone icon"></i> 1212121212 
    </a> 
</body> 
  
</html>