Semantic-UI Message Icon Type

Last Updated : 11 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 message type classes that can be used for different purposes to display a message with a good interface. In this article let us see about the messages of Icon type in Semantic UI.

Semantic-UI Icon type message classes:

icon: This indicates that the message is of icon type

Syntax:

<div class="ui icon message">
  <i class="icno-name* icon"></i>
  <div class="content">
   ...
  </div>
</div>

Example 1: This example describes the message of icon type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic-UI Message Icon Type</title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
  <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
          integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
          crossorigin="anonymous"> 
  </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 Message Icon Type 
    </strong> 
  </center> 
  <br /> 
  <br /> 
  <div class=" ui container"> 
    <div class="ui icon message"> 
      <i class="save icon"></i> 
      <div class="content"> 
        <div class="header"> 
          Save the file to view it offline 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
</html>

Output :

Semantic-UI Message Icon Type

Example 2: This example describes the message of icon type.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
  <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
          integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
          crossorigin="anonymous"> 
  </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 Message Icon Type 
    </strong> 
  </center> 
  <br /> 
  <br /> 
  <div class=" ui container"> 
    <div class="ui icon message"> 
      <i class="bell icon"></i> 
      <div class="content"> 
        <div class="header"> 
          There are some notifications in the inbox 
        </div> 
        <p> Archive notifications</p> 
      </div> 
    </div> 
  </div> 
</body> 
</html> 