Semantic-UI Icon Header Content Last Updated : 08 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Semantic UI Header Icon Content Reference: https://semantic-ui.com/elements/header.html#icon Comment More infoAdvertise with us Next Article Semantic-UI Menu Header Content S skyridetim Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Header Content 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 2 min read Semantic-UI Item Content Header 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 Item content offers us different content like image, content, header, met 2 min read Semantic-UI Menu Header Content Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Menu is a group of elements th 2 min read Semantic-UI List Header Content 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 looks more amazing. It uses a class to add CSS to the elements. Semantic-UI list provides us different v 3 min read Semantic-UI Image Header Content 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 2 min read Semantic-UI Modal Header Content Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Modal displays content above t 2 min read Like