Semantic-UI Icon Header Content

Last Updated : 08 Mar, 2022

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 header provides a short summary of content and it’s can contain 3 content Image, Icon, and Subheader. The Semantic-UI Content component is important like without the header/summary the content finding procedure will kill lots of times. In this article, we will now about the Icon Content.

Semantic UI Header Icon Content Class:

icon: This class is used to include the icon in the header.

Syntax:

<h2 class="ui header">
  <i class="icon-name icon"></i>
  <div class="...">
    ...
  </div>
</h2>

Below examples illustrate the Semantic UI Header Icon Content:

Example 1: In this article, we will use a normal book icon.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Icon Header Content</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui header green"> 
            GeeksforGeeks 
        </h1> 
        <strong> 
            Semantic-UI Header Icon Content 
        </strong> 
    </center> 
    <br> 
    <div class="ui segment"> 
        <strong class="ui header"> 
            Geeksforgeeks: 
        </strong> 
        <p> 
            Free Tutorials, Millions of Articles, Live, 
            Online and Classroom Courses ,Frequent Coding 
            Competitions ,Webinars by Industry Experts, 
            Internship opportunities and Job Opportunities. 
        </p> 
  
  
        <br> 
        <i class="book icon"></i> 
        <strong class="ui subheader"> 
            A Computer Science Portal for 
            Geeks 
        </strong> 
    </div> 
</body> 
  
</html>

Output:

Semantic UI Header Icon Content

Example 2: In this example, we will see how we can set the icon color as well.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Icon Header Content</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
</head> 
  
<body> 
<center> 
    <h1 class="ui header green"> 
    GeeksforGeeks 
    </h1> 
    <strong> 
     Semantic-UI Header Icon Content 
    </strong> 
</center> 
<br> 
<div class="ui segment"> 
    <strong class="ui header"> 
    Geeksforgeeks: 
    </strong> 
    <p> 
        Free Tutorials, Millions of Articles, Live, 
        Online and Classroom Courses ,Frequent Coding 
        Competitions ,Webinars by Industry Experts, 
        Internship opportunities and Job Opportunities. 
    </p> 
  
  
    <br> 
    <i class="book green icon"></i> 
    <strong class="ui subheader"> 
     A Computer Science Portal for Geeks 
    </strong> 
</div> 
</body> 
  
</html> 