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 diferentes 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 salud. La interfaz de usuario semántica proporciona algunas clases de iconos de uso común para la salud para su uso en aplicaciones médicas o de seguimiento de la salud.
Conjunto de iconos de interfaz de usuario semántica Clases de salud:
- ambulancia: esta clase se utiliza para mostrar el icono de ambulancia.
- cuadrado h: esta clase se utiliza para mostrar el icono del cuadrado h.
- corazón: esta clase se utiliza para mostrar iconos de corazón.
- contorno del corazón: esta clase se utiliza para mostrar el contorno del icono del corazón.
- latido del corazón: esta clase se utiliza para mostrar el icono del latido del corazón.
- hospital: esta clase se utiliza para mostrar el icono del hospital.
- contorno del hospital: esta clase se utiliza para mostrar el contorno del icono del hospital.
- botiquín: esta clase se utiliza para mostrar el icono del botiquín.
- cuadrado más: esta clase se utiliza para mostrar el icono del cuadrado más.
- contorno del cuadrado más: esta clase se utiliza para mostrar el contorno del icono del cuadrado más.
- estetoscopio: esta clase se utiliza para mostrar el icono del estetoscopio.
- usuario md: esta clase se utiliza para mostrar el icono de usuario md.
- silla de ruedas: esta clase se utiliza para mostrar el icono de la silla de ruedas.
Sintaxis:
<i class="icon.... health-class"></i>
Ejemplo 1: este código demuestra todas las clases de conjuntos de iconos de salud.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Health</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </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 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>
Producción:
Estado del conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: este código demuestra las clases de conjuntos de iconos de salud.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Health</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </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 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>
Producción:
Estado del conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#health
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA