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 set of code. Semantic UI provides some most commonly used icon classes for design which were mostly used in the editors and here are the classes.
An icon is a glyph used to represent something else and it can represent programming and programming tools.
Semantic-UI Icon Set Code Classes:
- archive: This class is used to make an archive icon
- barcode: This class is used to make a barcode icon
- bath: This class is used to make a bath icon
- bug: This class is used to make a bug icon
- code: This class is used to make a code icon
- code branch: This class is used to make a
- coffee: This class is used to make a code branch icon
- file: This class is used to make a file icon
- file outline: This class is used to make a file outline icon
- file alternate: This class is used to make a file alternate icon
- file alternate outline: This class is used to make a file alternate outline icon
- file code: This class is used to make a file code icon
- file code outline: This class is used to make a file code outline icon
- filter: This class is used to make a filter icon
- fire extinguisher: This class is used to make a fire extinguisher icon
- folder: This class is used to make a folder icon
- folder outline: This class is used to make a folder outline icon
- folder open: This class is used to make a folder open icon
- folder open outline: This class is used to make a folder open outline icon
- keyboard: This class is used to make a keyboard icon
- keyboard outline: This class is used to make a keyboard outline icon
- microchip: This class is used to make a microchip icon
- qrcode: This class is used to make a qrcode icon
- shield alternate: This class is used to make a shield alternate icon
- sitemap: This class is used to make a sitemap icon
- terminal: This class is used to make a terminal icon
- user secret: This class is used to make a user secret icon
- window close: This class is used to make a window close icon
- window close outline: This class is used to make a
- window maximize: This class is used to make a window maximize icon
- window maximize outline: This class is used to make a window maximize outline icon
- window minimize: This class is used to make a window minimize icon
- window minimize outline: This class is used to make a window minimize outline icon
- window restore: This class is used to make a window restore icon
- window restore outline: This class is used to make a window restore outline icon
Syntax:
<i class="Set-Code-classes icon"></i>
Example 1: This code demonstrates all code icon set classes.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Code</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set code
</strong>
<br/>
<br/>
<div class=" ui container">
<div class="ui grid">
<div class="three wide column">
<i class="archive icon"></i>
</div>
<div class="three wide column">
<i class="barcode icon"></i>
</div>
<div class="three wide column">
<i class="bath icon"></i>
</div>
<div class="three wide column">
<i class="bug icon"></i>
</div>
<div class="three wide column">
<i class="code icon"></i>
</div>
<div class="three wide column">
<i class="code branch icon"></i>
</div>
<div class="three wide column">
<i class="coffee icon"></i>
</div>
<div class="three wide column">
<i class="file icon"></i>
</div>
<div class="three wide column">
<i class="file outline icon"></i>
</div>
<div class="three wide column">
<i class="file alternate icon"></i>
</div>
<div class="three wide column">
<i class="file alternate outline icon"></i>
</div>
<div class="three wide column">
<i class="file code icon"></i>
</div>
<div class="three wide column">
<i class="file code outline icon"></i>
</div>
<div class="three wide column">
<i class="filter icon"></i>
</div>
<div class="three wide column">
<i class="fire extinguisher icon"></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Code
Example 2: This code demonstrates all code icon set classes.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Icon Set Code</strong>
<br/>
<br/>
<div class="ui container">
<button class="ui button">
<i class="folder outline icon"></i>
</button>
<button class="ui button">
<i class="folder open icon"></i>
</button>
<button class="ui button">
<i class="folder open outline icon"></i>
</button>
<button class="ui button">
<i class="keyboard icon"></i>
</button>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Code
Reference: https://semantic-ui.com/elements/icon.html#code