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, veremos sobre el conjunto de iconos de la computadora. Semantic UI Icon Set Computers proporciona algunas de las clases de iconos más utilizadas para computadoras y aquí están las clases.
Conjunto de iconos de interfaz de usuario semántica Clases de computadora:
- escritorio: esta clase se utiliza para mostrar el icono del escritorio.
- download: Esta clase se utiliza para mostrar el icono de descarga.
- hdd: esta clase se utiliza para mostrar el icono de HDD.
- contorno hdd: esta clase se utiliza para mostrar el contorno del icono.
- auriculares: esta clase se utiliza para mostrar el icono de los auriculares.
- teclado: esta clase se utiliza para mostrar el icono del teclado.
- contorno del teclado : esta clase se utiliza para mostrar el contorno del icono del teclado.
- laptop: Esta clase se usa para mostrar el icono de la laptop.
- microchip: esta clase se utiliza para mostrar el icono del microchip.
- móvil : esta clase se utiliza para mostrar el icono del móvil.
- alternativa móvil: esta clase se utiliza para mostrar el icono de alternativa móvil.
- enchufe : esta clase se utiliza para mostrar el icono del enchufe.
- apagado: esta clase se utiliza para mostrar el icono de apagado.
- imprimir: Esta clase se utiliza para mostrar el icono de imprimir.
- guardar: esta clase se utiliza para mostrar el icono de guardar.
- guardar contorno: esta clase se utiliza para mostrar el contorno del icono de guardar.
- servidor: esta clase se utiliza para mostrar el icono del servidor.
- tablet: Esta clase se utiliza para mostrar el icono de la tablet.
- tableta alternativa: esta clase se utiliza para mostrar el icono de tableta alternativa.
- tv: esta clase se utiliza para mostrar el icono de tv.
- cargar: esta clase se utiliza para mostrar el icono de carga.
Sintaxis:
<i class="icon.... computer-icon-class "></i>
Ejemplo 1: este código demuestra todas las clases de conjunto de iconos de computadora.
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 Computers </strong> <br /> <br /> <div class=" ui container"> <div class="ui grid"> <div class="three wide column"> <i class="icon big desktop"></i> </div> <div class="three wide column"> <i class="icon big download"></i> </div> <div class="three wide column"> <i class="icon big hdd"></i> </div> <div class="three wide column"> <i class="icon big hdd outline"></i> </div> <div class="three wide column"> <i class="icon big headphones"></i> </div> <div class="three wide column"> <i class="icon big keyboard "></i> </div> <div class="three wide column"> <i class="icon big keyboard outline"></i> </div> <div class="three wide column"> <i class="icon big laptop"></i> </div> <div class="three wide column"> <i class="icon big microchip "></i> </div> <div class="three wide column"> <i class="icon big mobile"></i> </div> <div class="three wide column"> <i class="icon big mobile alternate"></i> </div> <div class="three wide column"> <i class="icon big plug"></i> </div> <div class="three wide column"> <i class="icon big print"></i> </div> <div class="three wide column"> <i class="icon big power off"></i> </div> <div class="three wide column"> <i class="icon big save"></i> </div> <div class="three wide column"> <i class="icon big save outline"></i> </div> <div class="three wide column"> <i class="icon big server"></i> </div> <div class="three wide column"> <i class="icon big tablet"></i> </div> <div class="three wide column"> <i class="icon big tablet alternate"></i> </div> <div class="three wide column"> <i class="icon big tv"></i> </div> <div class="three wide column"> <i class="icon big upload"></i> </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: este código demuestra los iconos de colores
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 Computers </strong> <br /> <br /> <div class=" ui container"> <i class="upload grey large icon"></i> <i class="download blue large icon"></i> <i class="save outline green large icon"></i> <i class="print red large icon"></i> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#computers
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA