Semantic-UI | Icon
Last Updated :
21 Jun, 2020
Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is very much similar to bootstrap usage to make the website more amazing. It uses classes to add styles to the HTML elements or controls.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Icon</h2>
<i class="code huge icon"></i>
<h2>Code</h2>
<i class="globe huge icon"></i>
<h2>Globe</h2>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Example: The following example shows disabled icons.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2> Disabled Icon</h2>
<i class="disabled power off
huge icon"></i> <br>
<h3>Power off</h3>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Example: The following example shows loading icon.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2> Loading Icon</h2>
<br>
<i class="spinner loading huge icon"></i>
<i class="notched circle loading huge icon"></i>
<i class="asterisk loading huge icon"></i>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Example: The following example shows Circular Icon.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2> Circular Icon</h2>
<br>
<i class="circular power off huge icon"></i>
<i class="circular inverted power off huge icon"></i>
<i class="circular teal power off huge icon"></i>
<i class="circular inverted teal power off huge icon"></i>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Example: The following example shows Bordered Icon.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2> Bordered Icon</h2>
<br>
<i class="bordered power off huge icon"></i>
<i class="bordered inverted power off huge icon"></i>
<i class="bordered teal power off huge icon"></i>
<i class="bordered inverted teal power off huge icon"></i>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output
Example: The following example shows Coloured Icon.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2> Coloured Icon</h2>
<br>
<i class=" red code huge icon"></i><br>
<i class=" blue code huge icon"></i><br>
<i class=" green code huge icon"></i><br>
<i class=" yellow code huge icon"></i><Br>
</div>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Example: The following example shows Different size Icons.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2> Different size Icon</h2>
<br>
<i class="mini globe icon"></i>
<i class="tiny globe icon"></i>
<i class="small globe icon"></i>
<i class="globe icon"></i>
<i class="large globe icon"></i>
<i class="big globe icon"></i>
<i class="huge globe icon"></i>
<i class="massive globe icon"></i>
</div>
<script src=
integrity=
"sha256- hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...