Semantic-UI Icon Headers Type
Last Updated :
25 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 Headers. Semantic UI provides some most commonly used icon classes for Headers Type which were mostly used in the editors and here are the classes.
Semantic UI Icon Headers Type classes:
- icon: This class is used to display the icon into Headers.
- desktop: This class is used to show the desktop icon.
- download: This class is used to show the download icon.
Syntax:
<div class="ui icon header">
<i class="any-icon"></i>
...
</div>
Example 1: This code demonstrates the use of the Icon Headers Type class.
HTML
<html>
<head>
<title>Semantic-UI Icon Headers Type</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
Geeksforgeeks
</h1>
<h4>
Semantic-UI Icon Headers Type
</h4>
<h4 class="ui icon header">
<i class="download icon"></i>
<div class="content">
Download
</div>
</h4>
</center>
<script crossorigin="anonymous"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Semantic-UI Icon Headers Type
Example 2: This is another code to demonstrate the use of the Icon Headers Type class.
HTML
<html>
<head>
<title>Semantic-UI Icon Headers Type</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
Geeksforgeeks
</h1>
<h4>
Semantic-UI Icon Headers Type
</h4>
<h2 class="ui icon header">
<i class="circular desktop icon"></i>
<div class="content">
Desktop
</div>
</h2>
</center>
<script crossorigin="anonymous"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Semantic-UI Icon Headers Type
Reference link: https://semantic-ui.com/elements/header.html#icon-headers
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...