Semantic UI es un marco de código abierto que utiliza CSS y jQuerypara construir excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente y receptivo. Un icono es un glifo que se usa para representar otra cosa. La interfaz de usuario semántica proporciona miles de íconos a través de un puerto completo de Font Awesome 5.0.8 diseñado por el equipo de Font Awesome para su conjunto de íconos estándar. Estos íconos cumplen una función muy similar al texto en una página y se pueden formatear como texto. Estos íconos son elementos en línea, por lo que no afectan el formato del texto. Para usar el conjunto de íconos en la interfaz de usuario semántica, usamos la etiqueta especial <i> que permite un marcado abreviado cuando se encuentra junto al texto. La etiqueta <i> utiliza el icono de clase junto con el nombre del icono. El nombre de clase utilizado con la etiqueta <i> determina la forma del icono. Por ejemplo, silla de ruedas, lenguaje de señas,
Sintaxis:
<i class="<icon-name> icon"></i>
Ejemplo 1: el siguiente ejemplo muestra los diferentes iconos proporcionados por la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding: 20px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI Icon Set</strong> </center><br> <i class="american sign language interpreting icon"></i> <i class="assistive listening systems icon"></i> <i class="audio description icon"></i> <i class="blind icon"></i> <i class="braille icon"></i> <i class="angle double down icon"></i> <i class="angle double left icon"></i> <i class="angle double right icon"></i> <i class="angle double up icon"></i> <i class="angle down icon"></i> <i class="angle left icon"></i> <i class="angle right icon"></i> <i class="angle up icon"></i> <i class="arrow alternate circle down icon"></i> <i class="arrow alternate circle down outline icon"></i> <i class="arrow alternate circle left icon"></i> <i class="arrow alternate circle left outline icon"></i> <i class="arrow alternate circle right icon"></i> <i class="arrow alternate circle right outline icon"></i> <i class="arrow alternate circle up icon"></i> <i class="arrow alternate circle up outline icon"></i> <i class="arrow circle down icon"></i> <i class="arrow circle left icon"></i> <i class="arrow circle right icon"></i> <i class="arrow circle up icon"></i> <i class="arrow down icon"></i> <i class="arrow left icon"></i> <i class="arrow right icon"></i> <i class="arrow up icon"></i> <i class="arrows alternate icon"></i> <i class="arrows alternate horizontal icon"></i> <i class="arrows alternate vertical icon"></i> <i class="caret down icon"></i> </body> </html>
Producción:
Producción
Ejemplo 2: el siguiente ejemplo muestra los íconos en diferentes colores proporcionados por la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding: 20px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI Icon Set</strong> <br> <i class="red users icon"></i> <i class="orange users icon"></i> <i class="yellow users icon"></i> <i class="olive users icon"></i> <i class="green users icon"></i><br/> <i class="teal users icon"></i> <i class="blue users icon"></i> <i class="violet users icon"></i> <i class="purple users icon"></i> <i class="pink users icon"></i><br/> <i class="brown users icon"></i> <i class="grey users icon"></i> <i class="black users icon"></i> </center> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/elements/icon.html#/icon
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA