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 about the icon coloured variation.
The icon coloured variation allows the user to make the colourful icons of the icon set of semantic UI.
Semantic UI icon coloured variation classes:
- red: This sets the icon colour as red.
- orange: This sets the icon colour like orange.
- yellow: This sets the icon colour as yellow.
- olive: This sets the icon colour as olive.
- green: This sets the icon colour as green.
- teal: This sets the icon colour as teal.
- blue: This sets the icon colour as blue.
- violet: This sets the icon colour as violet.
- purple: This sets the icon colour as purple.
- pink: This sets the icon colour as pink.
- brown: This sets the icon colour as brown.
- grey: This sets the icon colour as grey.
- black: This sets the icon colour as black.
Syntax:
<i class="red ...."> .... </i>
Example 1: The following code demonstrates the icon download classes along with icon coloured classes.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<div style="margin-top:50px" class="ui container">
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>
Semantic UI icon coloured variation
</strong><br />
<i class="red download icon"></i>
<i class="orange download icon"></i>
<i class="yellow download icon"></i>
<i class="olive download icon"></i>
<i class="green download icon"></i>
<i class="teal download icon"></i>
<i class="blue download icon"></i>
<i class="violet download icon"></i>
<i class="purple download icon"></i>
<i class="pink download icon"></i>
<i class="brown download icon"></i>
<i class="grey download icon"></i>
<i class="black download icon"></i>
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the icon forward, play and backward classes along with icon coloured classes.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<div style="margin-top:50px" class="ui container">
<h1 class="ui header green">
GeeksforGeeks
</h1>
<p><strong>
Semantic UI icon coloured variation
</strong></p>
<i class="red backward icon"></i>
<i class=" step backward icon"></i>
<i class="blue play icon"></i>
<i class=" step forward icon"></i>
<i class="red forward icon"></i>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#/icon