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 iconos de Interfaces. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para las interfaces que representan acciones comunes.
Clases de interfaces de conjunto de iconos de interfaz de usuario semántica:
- *icon interface_class: esta clase se utiliza para incluir varios iconos en las interfaces.
<i class="icon....interface_class"></i>
Nota: https://semantic-ui.com/elements/icon.html#interfaces
Ejemplo 1: este código demuestra todas las clases de conjunto de iconos de interfaz.
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 Interfaces </strong> <br /> <br /> <div class="container"> <div class="ui grid"> <div class="three wide column"> <i class="icon big ban"></i> </div> <div class="three wide column"> <i class="icon big barcode"></i> </div> <div class="three wide column"> <i class="icon big bars"></i> </div> <div class="three wide column"> <i class="icon big beer"></i> </div> <div class="three wide column"> <i class="icon big bell"></i> </div> <div class="three wide column"> <i class="icon big bell outline"></i> </div> <div class="three wide column"> <i class="icon big bell slash"></i> </div> <div class="three wide column"> <i class="icon big bell slash outline"></i> </div> <div class="three wide column"> <i class="icon big bug"></i> </div> <div class="three wide column"> <i class="icon big bullhorn"></i> </div> </div> </div> </center> </body> </html>
Producción:
Interfaces de conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: este código muestra un ejemplo de clases de conjunto de iconos de interfaz.
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 Interfaces </strong> <br /> <br /> <div class="container"> <div class="ui icon buttons"> <button class="ui button"> <i class=" wifi large icon"></i> </button> <button class="ui button"> <i class="signal large icon"></i> </button> <button class="ui button"> <i class="microphone large icon"></i> </button> <button class="ui button"> <i class="keyboard large icon"></i> </button> <button class="ui button"> <i class="calendar large icon"></i> </button> </div> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#interfaces
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA