Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas. En la etiqueta Semantic UI, se ofrecen 9 tipos de etiquetas. Puede incluir 4 tipos de contenido, a saber, detalle, icono, imagen y enlace.
En este artículo, aprenderemos sobre el ícono de contenido de etiqueta de IU semántica.
El ícono Contenido de etiqueta de IU semántica se usa para incluir el ícono dentro de la etiqueta.
Ícono de contenido de etiqueta de interfaz de usuario semántica Clase:
- icon: Esta clase se utiliza para incluir el icono dentro de la etiqueta.
Sintaxis:
<a class="ui label"> <i class="... icon"></i> ... </a>
Ejemplo: El siguiente ejemplo ilustra el icono de contenido de etiqueta de interfaz de usuario semántica utilizando la etiqueta y la clase de icono .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="header ui green"> GeeksforGeeks </h1> <strong>Semantic UI Label Icon Content</strong> <br><br> <a class="ui label"> <i class="mail large green icon"></i> Mail us about your experience </a> <a class="ui label"> <i class="trash large red icon"></i> Dump the Zunk </a> </center> </body> </html>
Producción:
Contenido de icono de etiqueta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/label.html#icon
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA