Semantic-UI List Icon Content
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
Reference: https://semantic-ui.com/elements/list.html#icon
Last Updated :
10 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...