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 el conjunto de códigos Icon. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para el diseño que se usaron principalmente en los editores y aquí están las clases.
Un icono es un glifo que se usa para representar otra cosa y puede representar programación y herramientas de programación.
Clases de código de conjunto de iconos de interfaz de usuario semántica:
- archivo : esta clase se usa para hacer un icono de archivo
- código de barras : esta clase se utiliza para hacer un icono de código de barras
- baño : esta clase se usa para hacer un ícono de baño
- error : esta clase se usa para crear un icono de error
- código : esta clase se usa para hacer un icono de código
- rama de código : esta clase se usa para hacer una
- café : esta clase se usa para hacer un icono de rama de código
- archivo : esta clase se usa para hacer un icono de archivo
- esquema de archivo : esta clase se utiliza para crear un icono de esquema de archivo
- archivo alternativo : esta clase se utiliza para crear un icono de archivo alternativo
- esquema alternativo de archivo : esta clase se utiliza para crear un icono de esquema alternativo de archivo
- código de archivo : esta clase se utiliza para crear un icono de código de archivo
- esquema de código de archivo : esta clase se utiliza para crear un icono de esquema de código de archivo
- filtro : esta clase se usa para hacer un icono de filtro
- extintor de incendios : esta clase se utiliza para hacer un icono de extintor de incendios
- carpeta : esta clase se usa para hacer un icono de carpeta
- esquema de carpeta : esta clase se utiliza para crear un icono de esquema de carpeta
- Carpeta abierta : esta clase se utiliza para crear un icono de carpeta abierta
- esquema abierto de carpeta : esta clase se utiliza para crear un icono de esquema abierto de carpeta
- teclado : esta clase se usa para hacer un icono de teclado
- contorno del teclado : esta clase se utiliza para crear un icono de contorno del teclado
- microchip : esta clase se usa para hacer un ícono de microchip
- qrcode : esta clase se usa para hacer un icono qrcode
- escudo alternativo : esta clase se usa para hacer un icono de escudo alternativo
- mapa del sitio : esta clase se usa para hacer un icono de mapa del sitio
- terminal : esta clase se usa para hacer un icono de terminal
- secreto de usuario : esta clase se utiliza para crear un icono de secreto de usuario
- cierre de ventana : esta clase se utiliza para hacer un icono de cierre de ventana
- contorno de cierre de ventana : esta clase se utiliza para hacer un
- maximización de ventana : esta clase se utiliza para hacer un icono de maximización de ventana
- ventana maximizar contorno : esta clase se utiliza para hacer un icono de ventana maximizar contorno
- Minimizar ventana : Esta clase se utiliza para hacer un icono de minimización de ventana.
- ventana minimizar contorno : esta clase se utiliza para hacer que una ventana minimice el contorno icono
- restauración de ventana : esta clase se utiliza para hacer un icono de restauración de ventana
- esquema de restauración de ventana : esta clase se utiliza para crear un icono de esquema de restauración de ventana
Sintaxis:
<i class="Set-Code-classes icon"></i>
Ejemplo 1: este código demuestra todas las clases de conjunto de iconos de código.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Code</title> <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 code </strong> <br/> <br/> <div class=" ui container"> <div class="ui grid"> <div class="three wide column"> <i class="archive icon"></i> </div> <div class="three wide column"> <i class="barcode icon"></i> </div> <div class="three wide column"> <i class="bath icon"></i> </div> <div class="three wide column"> <i class="bug icon"></i> </div> <div class="three wide column"> <i class="code icon"></i> </div> <div class="three wide column"> <i class="code branch icon"></i> </div> <div class="three wide column"> <i class="coffee icon"></i> </div> <div class="three wide column"> <i class="file icon"></i> </div> <div class="three wide column"> <i class="file outline icon"></i> </div> <div class="three wide column"> <i class="file alternate icon"></i> </div> <div class="three wide column"> <i class="file alternate outline icon"></i> </div> <div class="three wide column"> <i class="file code icon"></i> </div> <div class="three wide column"> <i class="file code outline icon"></i> </div> <div class="three wide column"> <i class="filter icon"></i> </div> <div class="three wide column"> <i class="fire extinguisher icon"></i> </div> </div> </div> </center> </body> </html>
Producción:
Código de conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: este código demuestra todas las clases de conjunto de iconos de código.
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 Code</strong> <br/> <br/> <div class="ui container"> <button class="ui button"> <i class="folder outline icon"></i> </button> <button class="ui button"> <i class="folder open icon"></i> </button> <button class="ui button"> <i class="folder open outline icon"></i> </button> <button class="ui button"> <i class="keyboard icon"></i> </button> </div> </center> </body> </html>
Producción:
Código de conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#code
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA