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. En este artículo, vamos a aprender sobre la escritura de conjuntos de iconos. Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. Un icono es un glifo que se usa para representar otra cosa. En Establecer escritura, tenemos un ícono relacionado con la escritura, como un ícono de marcador, un ícono de edición y muchos más.
Clase de icono de escritura de etiquetas de interfaz de usuario semántica:
- archivo: esta clase se utiliza para crear un icono de archivo
- libro: esta clase se utiliza para crear un icono de libro
- marcador: esta clase se utiliza para crear un icono de marcador
- contorno de marcador: esta clase se utiliza para crear un icono de contorno de marcador
- editar: esta clase se usa para crear y editar íconos
- editar esquema: esta clase se usa para crear un icono de editar esquema
- sobre: esta clase se utiliza para crear un icono de sobre
- contorno de sobre: esta clase se utiliza para crear un icono de contorno de sobre
- sobre abierto: esta clase se utiliza para crear un icono de sobre abierto
- contorno abierto del sobre: esta clase se utiliza para crear un icono de contorno abierto del sobre
- borrador: esta clase se utiliza para crear un icono de borrador
- archivo: esta clase se utiliza para crear 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
- carpeta: esta clase se utiliza para crear 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 utiliza para crear un icono de teclado
- contorno del teclado: esta clase se utiliza para crear un icono de contorno del teclado
- periódico: esta clase se utiliza para crear un icono de periódico
- contorno de periódico: esta clase se utiliza para crear un icono de contorno de periódico
- avión de papel: esta clase se utiliza para crear un icono de avión de papel
- contorno de avión de papel: esta clase se utiliza para crear un icono de contorno de avión de papel
- clip: esta clase se utiliza para crear un icono de clip
- párrafo: esta clase se utiliza para crear un icono de párrafo
- bolígrafo cuadrado: esta clase se utiliza para crear un icono de bolígrafo cuadrado
- lápiz alternativo: esta clase se utiliza para crear un icono de lápiz alternativo
- cita izquierda: esta clase se utiliza para crear un icono de cita izquierda
- citar a la derecha: esta clase se utiliza para crear un icono de citar a la derecha
- nota adhesiva: esta clase se utiliza para crear un icono de nota adhesiva
- contorno de nota adhesiva: esta clase se utiliza para crear un icono de contorno de nota adhesiva
- chincheta: esta clase se utiliza para crear un icono de chincheta
Sintaxis:
<i class="Name_Of_The_Icon icon"></i>
Ejemplo 1: El siguiente ejemplo ilustra la escritura del conjunto de iconos de interfaz de usuario semántica
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Writing/title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksForGeeks</h1> <h2>Semantic UI Icon Set Writing </h2> <i class="archive large icon"> archive</i> <br><br><br> <i class="book large icon"> book</i> <br><br><br> <i class="bookmark large icon"> bookmark</i> <br><br><br> <i class="bookmark large outline icon"> bookmark outline </i><br><br><br><br> <i class="edit large icon">edit</i><br> </center> </body> </html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo ilustra la escritura del conjunto de iconos de interfaz de usuario semántica
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Writing</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <h2>Semantic UI Icon Set Writing </h2> <i class="envelope open icon red"> envelope open</i> <br><br> <i class="file icon blue"> file icon</i> <br><br> <i class="newspaper icon yellow"> newspaper</i> <br><br> <i class="paper plane icon purple"> paper plane </i> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#writing
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