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 Health. Semantic UI provides some commonly used icon classes for Health for use in medical or health-tracking applications.
Semantic UI Icon set Health classes:
- ambulance: This class is used to show the ambulance icon.
- h square: This class is used to show the h square icon.
- heart: This class is used to show heart icons.
- heart outline: This class is used to show the outline of the heart icon.
- heartbeat: This class is used to show the heartbeat icon.
- hospital: This class is used to show the hospital icon.
- hospital outline: This class is used to show the outline of the hospital icon.
- medkit: This class is used to show the medkit icon.
- plus square: This class is used to show the plus square icon.
- plus square outline: This class is used to show the outline of the plus square icon.
- stethoscope: This class is used to show the stethoscope icon.
- user md: This class is used to show the user md icon.
- wheelchair: This class is used to show the wheelchair icon.
Syntax:
<i class="icon.... health-class"></i>
Example 1: This code demonstrates all health icon set classes.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Icon Set Health</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Icon Set Health
</strong>
<br />
<br />
<div class=" ui container">
<div class="ui grid">
<div class="three wide column">
<i class="icon big ambulance"></i>
</div>
<div class="three wide column">
<i class="icon big h square"></i>
</div>
<div class="three wide column">
<i class="icon big heart"></i>
</div>
<div class="three wide column">
<i class="icon big heart outline"></i>
</div>
<div class="three wide column">
<i class="icon big heartbeat"></i>
</div>
<div class="three wide column">
<i class="icon big hospital"></i>
</div>
<div class="three wide column">
<i class="icon big hospital outline"></i>
</div>
<div class="three wide column">
<i class="icon big medkit"></i>
</div>
<div class="three wide column">
<i class="icon big plus square"></i>
</div>
<div class="three wide column">
<i class="icon big plus square outline"></i>
</div>
<div class="three wide column">
<i class="icon big stethoscope"></i>
</div>
<div class="three wide column">
<i class="icon big user md"></i>
</div>
<div class="three wide column">
<i class="icon big wheelchair"></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Health
Example 2: This code demonstrates health icon set classes.
<!DOCTYPE html><html>
<head>
<title>Semantic-UI Icon Set Health</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Health
</strong>
<br />
<br />
<div class=" ui container">
<button class="ui green button">
<i class="ambulance icon"></i>
Call ambulance
</button>
<button class="ui red button">
<i class="medkit icon"></i>
First Aid Assistance
</button>
<button class="ui blue button">
<i class="user md icon"></i>
Consult a doctor
</button>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Health
Reference: https://semantic-ui.com/elements/icon.html#health