Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Semantic-UI | Icon

  • Last Updated : 21 Jun, 2020

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is very much similar to bootstrap usage to make the website more amazing. It uses classes to add styles to the HTML elements or controls.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
        <h2>Icon</h2>
        <i class="code huge icon"></i>
        <h2>Code</h2>
        <i class="globe huge icon"></i>
        <h2>Globe</h2>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:

Example: The following example shows disabled icons.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
        <h2> Disabled Icon</h2>
        <i class="disabled power off 
            huge icon"></i> <br>
        <h3>Power off</h3>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:



Example: The following example shows loading icon.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
        <h2> Loading Icon</h2>
        <br>
        <i class="spinner loading huge icon"></i>
        <i class="notched circle loading huge icon"></i>
        <i class="asterisk loading huge icon"></i>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:

Example: The following example shows Circular Icon.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2> Circular Icon</h2>
        <br>
        <i class="circular  power off huge icon"></i>
        <i class="circular inverted power off huge icon"></i>
        <i class="circular teal power off huge icon"></i>
        <i class="circular inverted teal power off huge icon"></i>
    </div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:

Example: The following example shows Bordered Icon.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
        <h2> Bordered Icon</h2>
        <br>
        <i class="bordered  power off huge icon"></i>
        <i class="bordered inverted power off huge icon"></i>
        <i class="bordered teal power off huge icon"></i>
        <i class="bordered inverted teal power off huge icon"></i>
    </div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output

Example: The following example shows Coloured Icon.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2> Coloured Icon</h2>
        <br>
        <i class=" red code huge icon"></i><br>
        <i class=" blue code huge icon"></i><br>
        <i class=" green code huge icon"></i><br>
        <i class=" yellow code huge icon"></i><Br>
    </div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:

Example: The following example shows Different size Icons.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
            class="ui container">
        <h2> Different size Icon</h2>
        <br>
        <i class="mini globe icon"></i>
        <i class="tiny globe icon"></i>
        <i class="small globe icon"></i>
        <i class="globe icon"></i>
        <i class="large globe icon"></i>
        <i class="big globe icon"></i>
        <i class="huge globe icon"></i>
        <i class="massive globe icon"></i>
    </div>
  
    <script src=
        integrity=
"sha256- hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :