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. In this article, we are going to learn about Icon Set Writing. It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks. An icon is a glyph used to represent something else. In Set writing, we have an icon that is related to writing like a bookmark icon, editing icon, and many more.
Semantic-UI Label Writing Icon Class:
- archive: This class is used to create an archive icon
- book: This class is used to create a book icon
- bookmark: This class is used to create a bookmark icon
- bookmark outline: This class is used to create a bookmark outline icon
- edit: This class is used to create and edit icon
- edit outline: This class is used to create an edit outline icon
- envelope: This class is used to create an envelope icon
- envelope outline: This class is used to create an envelope outline icon
- envelope open: This class is used to create an envelope open icon
- envelope open outline: This class is used to create an envelope open outline icon
- eraser: This class is used to create an eraser icon
- file: This class is used to create a file icon
- file outline: This class is used to create a file outline icon
- file alternate: This class is used to create a file alternate icon
- file alternate outline: This class is used to create a file alternate outline icon
- folder: This class is used to create a folder icon
- folder outline: This class is used to create a folder outline icon
- folder open: This class is used to create a folder open icon
- folder open outline: This class is used to create a folder open outline icon
- keyboard: This class is used to create a keyboard icon
- keyboard outline: This class is used to create a keyboard outline icon
- newspaper: This class is used to create a newspaper icon
- newspaper outline: This class is used to create a newspaper outline icon
- paper plane: This class is used to create a paper plane icon
- paper plane outline: This class is used to create a paper plane outline icon
- paperclip: This class is used to create a paperclip icon
- paragraph: This class is used to create a paragraph icon
- pen square: This class is used to create a pen square icon
- pencil alternate: This class is used to create a pencil alternate icon
- quote left: This class is used to create a quote left icon
- quote right: This class is used to create a quote right icon
- sticky note: This class is used to create a sticky note icon
- sticky note outline: This class is used to create a sticky note outline icon
- thumbtack: This class is used to create a thumbtack icon
Syntax:
<i class="Name_Of_The_Icon icon"></i>
Example 1: The below example illustrates the Semantic-UI Icon Set Writing
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Writing/title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksForGeeks</h1>
<h2>Semantic UI Icon Set Writing </h2>
<i class="archive large icon"> archive</i>
<br><br><br>
<i class="book large icon"> book</i>
<br><br><br>
<i class="bookmark large icon"> bookmark</i>
<br><br><br>
<i class="bookmark large outline icon"> bookmark outline
</i><br><br><br><br>
<i class="edit large icon">edit</i><br>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Writing
Example 2: The below example illustrates the Semantic-UI Icon Set Writing
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Writing</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<h2>Semantic UI Icon Set Writing </h2>
<i class="envelope open icon red"> envelope open</i>
<br><br>
<i class="file icon blue"> file icon</i>
<br><br>
<i class="newspaper icon yellow"> newspaper</i>
<br><br>
<i class="paper plane icon purple"> paper plane </i>
</center>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#writing