Semantic-UI Icon Bordered Variation

Last Updated : 13 Feb, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. In this article, let us see about the icon-bordered variation.

The icon bordered variation allows the user to make the bordered icons of the icon set of semantic UI.

Semantic UI icon bordered variation classes:

bordered: This sets the icon within the border.

Syntax:

<i class="bordered icon ...">
    ...
</i>

Example 1: The following code demonstrates the bordered align icon classes along with left, right, center, and justify classes of the icon set.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
<center> 
    <body> 
        <div style="margin-top:50px" class="ui container"> 
            <h1 class="ui header green">GeeksforGeeks</h1> 
            <p><strong>Semantic UI icon bordered variation</strong></p> 
            <i class="bordered align left icon"></i> 
            <i class="bordered align center icon"></i> 
            <i class="bordered align justify icon"></i> 
            <i class="bordered align right icon"></i>            
        </div> 
    </body> 
</center> 
</html> 

Output:

Example 2: The following code demonstrates the bordered icon classes along with copy, paste, linkify, and clipboard classes of the icon set.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
<center> 
  
    <body> 
        <div style="margin-top:50px" class="ui container"> 
            <h1 class="ui header green">GeeksforGeeks</h1> 
            <p><strong>Semantic UI icon bordered variation</strong></p> 
            <i class="bordered copy icon"></i> 
            <i class="bordered paste icon"></i> 
            <i class="bordered linkify icon"></i> 
            <i class="bordered clipboard icon"></i>            
        </div> 
    </body> 
</center> 
</html>