Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap. La interfaz de usuario semántica proporciona a los usuarios varios íconos que se pueden usar para diferentes propósitos con una hermosa interfaz de usuario. Los íconos agregan más belleza al sitio web que la representación textual. En este artículo, veamos sobre el conjunto de iconos de manos y gestos. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para manos y gestos.
Conjunto de iconos de interfaz de usuario semántica Clases de manos y gestos:
- lagarto de mano: Esta clase se utiliza para mostrar el icono de lagarto de mano.
- contorno de lagarto de mano: esta clase se utiliza para mostrar el icono de contorno de lagarto de mano.
- papel de mano: esta clase se utiliza para mostrar el icono de papel de mano.
- contorno de papel de mano: esta clase se utiliza para mostrar el icono de contorno de papel de mano.
- paz de la mano: esta clase se utiliza para mostrar el icono de la paz de la mano.
- contorno de la paz de la mano: esta clase se utiliza para mostrar el icono del contorno de la paz de la mano.
- mano apuntando hacia abajo: esta clase se utiliza para mostrar el icono de mano apuntando hacia abajo.
- contorno de mano apuntando hacia abajo: esta clase se utiliza para mostrar el icono de contorno de mano apuntando hacia abajo.
- punto de mano izquierda: Esta clase se utiliza para mostrar el icono de punto de mano izquierda.
- contorno izquierdo del punto de la mano: esta clase se utiliza para mostrar el icono del contorno izquierdo del punto de la mano.
- mano apuntando a la derecha: esta clase se utiliza para mostrar el icono de la mano apuntando a la derecha.
- contorno de punto de mano derecha: esta clase se utiliza para mostrar el icono de contorno de punto de mano derecha.
- mano apuntando hacia arriba: esta clase se utiliza para mostrar el icono de la mano apuntando hacia arriba.
- contorno de mano apuntando hacia arriba: esta clase se utiliza para mostrar el icono de contorno de mano apuntando hacia arriba.
- puntero de mano: esta clase se utiliza para mostrar el icono del puntero de mano.
- contorno de puntero de mano: esta clase se utiliza para mostrar el icono de contorno de puntero de mano.
- hand rock: esta clase se utiliza para mostrar el icono de mano rock.
- contorno de roca de mano: esta clase se utiliza para mostrar el icono de contorno de roca de mano.
- tijeras de mano: Esta clase se utiliza para mostrar el icono de tijeras de mano.
- contorno de tijeras de mano : esta clase se utiliza para mostrar el icono de contorno de tijeras de mano.
- mano de Spock: Esta clase se utiliza para mostrar el icono de la mano de Spock.
- contorno de la mano de Spock: Esta clase se utiliza para mostrar el icono del contorno de la mano de Spock.
- apretón de manos: esta clase se utiliza para mostrar el icono de apretón de manos.
- contorno de apretón de manos: esta clase se utiliza para mostrar el icono de contorno de apretón de manos.
- pulgares hacia abajo: esta clase se utiliza para mostrar el icono de pulgares hacia abajo.
- contorno de pulgares hacia abajo: esta clase se utiliza para mostrar el icono de contorno de pulgares hacia abajo.
- pulgar hacia arriba: esta clase se utiliza para mostrar el icono de pulgar hacia arriba.
- contorno de pulgares arriba: esta clase se utiliza para mostrar el icono de contorno de pulgares arriba.
Sintaxis:
<i class="icon....hands_and_gesture_class "></i>
Ejemplo 1: este código demuestra todas las clases de conjuntos de manos y gestos.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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>
Producción:
Ejemplo 2: este código muestra un ejemplo de clases de conjuntos de iconos de manos y gestos.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#hands–gestures
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA