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 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 hands and gestures. Semantic UI provides some most commonly used icon classes for hands and gestures.
Semantic UI Icon set Hands and Gestures classes:
- hand lizard: This class is used to show the hand lizard icon.
- hand lizard outline: This class is used to show the hand lizard outline icon.
- hand paper: This class is used to show the hand paper icon.
- hand paper outline: This class is used to show the hand paper outline icon.
- hand peace: This class is used to show the hand peace icon.
- hand peace outline: This class is used to show the hand peace outline icon.
- hand point down: This class is used to show the hand point down icon.
- hand point down outline: This class is used to show the hand point down outline icon.
- hand point left: This class is used to show the hand point left icon.
- hand point left outline: This class is used to show the hand point left outline icon.
- hand point right: This class is used to show the hand point right icon.
- hand point right outline: This class is used to show the hand point right outline icon.
- hand point up: This class is used to show the hand point up icon.
- hand points up outline: This class is used to show the hand point up outline icon.
- hand pointer: This class is used to show the hand pointer icon.
- hand pointer outline: This class is used to show the hand pointer outline icon.
- hand rock: This class is used to show the hand rock icon.
- hand rock outline: This class is used to show the hand rock outline icon.
- hand scissors: This class is used to show the hand scissors icon.
- hand scissors outline: This class is used to show the hand scissors outline icon.
- hand Spock: This class is used to show the hand Spock icon.
- hand Spock outline: This class is used to show the hand Spock outline icon.
- handshake: This class is used to show the handshake icon.
- handshake outline: This class is used to show the handshake outline icon.
- thumbs down: This class is used to show the thumbs down icon.
- thumbs down outline: This class is used to show the thumbs down outline icon.
- thumbs-up: This class is used to show the thumbs-up icon.
- thumbs up outline: This class is used to show the thumbs up outline icon.
Syntax:
<i class="icon....hands_and_gesture_class "></i>
Example 1: This code demonstrates all hands and gestures set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Hands and Gestures
</strong>
<br />
<br />
<div class="container">
<div class="ui grid">
<div class="three wide column">
<i class="icon big hand lizard"></i>
</div>
<div class="three wide column">
<i class="icon big hand lizard outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand paper"></i>
</div>
<div class="three wide column">
<i class="icon big hand paper outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand peace"></i>
</div>
<div class="three wide column">
<i class="icon big hand peace outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand point down"></i>
</div>
<div class="three wide column">
<i class="icon big hand point down outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand point left"></i>
</div>
<div class="three wide column">
<i class="icon big hand point left outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand point right "></i>
</div>
<div class="three wide column">
<i class="icon big hand point right outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand point up "></i>
</div>
<div class="three wide column">
<i class="icon big hand point up outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand pointer "></i>
</div>
<div class="three wide column">
<i class="icon big hand pointer outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand rock"></i>
</div>
<div class="three wide column">
<i class="icon big hand rock outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand scissors"></i>
</div>
<div class="three wide column">
<i class="icon big hand scissors outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand spock"></i>
</div>
<div class="three wide column">
<i class="icon big hand spock outline"></i>
</div>
<div class="three wide column">
<i class="icon big handshake"></i>
</div>
<div class="three wide column">
<i class="icon big handshake outline"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs down "></i>
</div>
<div class="three wide column">
<i class="icon big thumbs down outline"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs up"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs up outline "></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: This code demonstrates an example of Hands and Gestures icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Hands and Gestures
</strong>
<br />
<br />
<div class="container">
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="thumbs up icon"></i> Like
</div>
<a class="ui basic label">
157
</a>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="thumbs down icon"></i> Like
</div>
<a class="ui basic label">
34
</a>
</div>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#hands–gestures