Semantic-UI Icon Set Date & Time

Last Updated : 16 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. The icons add more beauty to the website than the textual representation.

In this article, let us see about the Icon Set of Date and Time. Semantic UI provides some most commonly used icon classes for date and time which were mostly used to add date and time widget icons into the applications.

Semantic UI Icon set Date and Time classes:

bell: This class is used to show the bell icon.
bell outline: This class is used to show the outline of the bell icon.
bell slash: This class is used to show the bell slash icon.
bell slash outline: This class is used to show an outline of the bell slash icon.
calendar: This class is used to show the calendar icon.
calendar outline: This class is used to show the outline of the calendar icon.
calendar alternate: This class is used to show the alternate calendar icon.
calendar alternate outline: This class is used to show the outline of the alternate calendar icon.
calendar check: This class is used to show the calendar check icon.
calendar check outline: This class is used to show the outline of the calendar check icons.
calendar minus: This class is used to show the calendar minus icon.
calendar minus outline: This class is used to show the outline of the calendar minus icon.
calendar plus: This class is used to show the calendar plus icon.
calendar plus outline: This class is used to show the outline of the calendar plus icon.
calendar times: This class is used to show the calendar times icon.
calendar times outline: This class is used to show the outline of the calendar times icon.
clock: This class is used to show the outline of the clock icon.
clock outline: This class is used to show the outline of the clock icon.
hourglass: This class is used to show the hourglass icon.
hourglass outline: This class is used to show the outline of the hourglass icon.
hourglass end: This class is used to show the hourglass end icon.
hourglass half: This class is used to show the outline of the hourglass half icon.
hourglass start: This class is used to show the outline of the hourglass start icon.
stopwatch: This class is used to show the stopwatch icon.

Syntax:

<i class="icon date_and_time_icon"></i>

Example 1: This code demonstrates all date and time icon set classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Icon Set Date & Time</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong> 
            Semantic-UI Icon Set Date and Time 
        </strong> 
        <br /> 
        <br /> 
        <div class="ui grid"> 
            <div class="three wide column"> 
                <i class="icon big bell "></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big bell outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big bell slash"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big bell slash outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar alternate"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar alternate outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar check"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar check outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar minus"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar minus outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar plus"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar plus outline "></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar times"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big calendar times outline "></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big clock"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big clock outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big hourglass"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big hourglass outline"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big hourglass end"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big hourglass half "></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big hourglass start"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big stopwatch"></i> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Semantic-UI Icon Set Date & Time

Example 2: This code demonstrates an example of date and time icon set classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Icon Set Date & Time</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong> 
            Semantic-UI Icon Set Date and Time 
        </strong> 
        <br /> 
        <br /> 
  
        <div class="container"> 
            <div class="ui label"> 
                <i class="bell blue icon"></i> 3 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>