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 Step is a cool way to represent the progress of any task. Like if you want to show Shipping after Carting then these steps can be shown by using this component. This component offers us a single type of steps with the three content types description, icon, and Link. In this article, we will learn about the Icon.
Semantic-UI Step Content Icon is used to include the icon in the steps so the steps look more meaningful.
Semantic-UI Step Icon Content Class:
- icon: This class is used to add the icon on the steps.
Syntax:
<div class="step">
<i class="... icon"></i>
</div>Example: Below is an example illustrating the use of the Semantic-UI Step Content Icon.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>
Semantic-UI Step Icon Content
</strong><br><br>
<div class="ui steps">
<div class="step">
<i class="truck icon green"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">
Select your Address
</div>
</div>
</div>
<div class="step">
<i class="file alternate icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">
Select your way to pay
</div>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Step Icon Content
Reference: https://semantic-ui.com/elements/step.html#icon