Skip to content
Related Articles

Related Articles

Semantic-UI List Icon Content

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Feb, 2022
View Discussion
Improve Article
Save Article

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.

Semantic UI list offers us to order any list. There are 4 types of listing available in the list component with the 6 different types of content. 

In this article, we will learn Semantic UI List Content Icon.

Semantic UI List Content Icon is used to include the icon in the list.

Semantic UI List Content Icon Class:

  • icon: This class is used to include the icon in the list content.

Syntax:

<div class="ui list">
  <a class="item">
    <i class="help icon"></i>
    <div class="content">
    ....
    </div>
  </a>
</div>

Example: The below example illustrate the Semantic UI List content icon. In this example, we will create 2 lists, one will be an ordered list and another will be an unordered list. You can include icon on any type of list.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
  
    <style>
        body {
            margin-left: 15px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="header ui green">
            GeeksforGeeks
        </h1>
          
        <strong>Semantic UI List Icon Content</strong>
        <br><br>
    </center>
  
    <strong>Unordered List Content Icon:</strong>
    <div class="ui list">
        <a class="item">
            <i class="book icon"></i>
            <div class="content">
                <div class="header">HTML:</div>
                <div class="description">
                    HTML stands for HyperText 
                    Markup Language.
                </div>
            </div>
        </a>
        <a class="item">
            <i class="book icon"></i>
            <div class="content">
                <div class="header">CSS:</div>
                <div class="description">
                    CSS stands for Cascading 
                    Style Sheets
                </div>
            </div>
        </a>
    </div>
    <br>
  
    <strong>Ordered List Content Icon:</strong>
    <div class="ui ordered list">
        <a class="item">
            <i class="book icon"></i>
            <div class="content">
                <div class="header">HTML:</div>
                <div class="description">
                    HTML stands for HyperText 
                    Markup Language.
                </div>
            </div>
        </a>
        <a class="item">
            <i class="book icon"></i>
            <div class="content">
                <div class="header">CSS:</div>
                <div class="description">
                    CSS stands for Cascading 
                    Style Sheets
                </div>
            </div>
        </a>
    </div>
</body>
  
</html>

Output:

Semantic-UI List Icon Content

Semantic-UI List Icon Content

Reference: https://semantic-ui.com/elements/list.html#icon


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!