Open In App

Semantic-UI List Icon Content

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 10 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads