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. In this article, let us see the icon size variation for the icon sets of Semantic UI.
Semantic UI icon size variation classes:
- mini: This sets the icon size to be mini.
- tiny: This sets the icon size to be tiny.
- small: This sets the icon size to be small.
- large: This sets the icon size to be large.
- big: This sets the icon size to be big.
- huge: This sets the icon size to be huge.
- massive: This sets the icon size to be massive.
Syntax:
<i class="mini icon ...">
...
</i>Example 1: The following code demonstrates the bug icon along with different size variations as mentioned above.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<center>
<body>
<div style="margin-top:50px" class="ui container">
<h1 class="ui green header">GeeksforGeeks</h1>
<p><strong>Semantic UI icon size variation</strong></p>
<i class="mini code icon"></i>
<i class="tiny code icon"></i>
<i class="small code icon"></i>
<i class="code icon"></i>
<i class="large code icon"></i>
<i class="big code icon"></i>
<i class="huge code icon"></i>
<i class="massive code icon"></i>
</div>
</body>
</center>
</html>
|
Output:
Example 2: The following code demonstrates the bug icon along with different size variations of the icon set.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<center>
<body>
<div style="margin-top:50px" class="ui container">
<h1 class="ui header green">GeeksforGeeks</h1>
<p><strong>Semantic UI icon size variation</strong></p>
<i class="mini bug icon"></i>
<i class="tiny bug icon"></i>
<i class="small bug icon"></i>
<i class="bug icon"></i>
<i class="large bug icon"></i>
<i class="big bug icon"></i>
<i class="huge bug icon"></i>
<i class="massive bug icon"></i>
</div>
</body>
</center>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html