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.

Output:

Semantic UI Header Icon Content

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

Output:

Semantic UI Header Icon Content 

Reference: https://semantic-ui.com/elements/header.html#icon