En la documentación, se menciona como Icons.css. El Icon.css es un elemento único que responde a los iconos de CSS puro, hay tres tipos de iconos disponibles en iconos de objetos de espectro, iconos de acción e iconos de navegación . Todos los íconos pueden tener diferentes tamaños, hay tres variantes de tamaños, como puede ser 2 veces más grande, 3 veces más grande o 4 veces más grande, para eso necesitamos usar el tamaño del ícono de Spectre .
Tipos de iconos de espectro:
- Íconos de Spectre Object: Esto se usa para incluir los íconos de objetos.
- Iconos de acción de Spectre: Esto se usa para incluir los iconos de acción.
- Íconos de Spectre Navigation: Esto se usa para incluir los íconos de navegación.
Nota: Hay un ícono de cosa más que es del tamaño que se describe en el primer párrafo.
Clase de iconos de espectro:
- icon: esta clase es imprescindible para agregar cualquier icono usando spectre.
Sintaxis:
<i class="icon ...></i>
El siguiente ejemplo ilustra los iconos de Spectre:
Ejemplo 1: en este ejemplo, crearemos 4 botones de objetos en diferentes tamaños.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Object Size icons Class</strong> <br><br> <div> Mail icon: <button> <i class="icon icon-mail"></i> </button> People icon 2x: <button> <i class="icon icon-2x icon-people"></i> </button> Message icon 3x: <button> <i class="icon icon-3x icon-message"></i> </button> Photo icon 4x: <button> <i class="icon icon-4x icon-photo"></i> </button> </div> </center> </body> </html>
Producción:
Iconos de espectro
Ejemplo 2: en este ejemplo, crearemos 4 botones de acción en diferentes tamaños.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Action Size icons Class</strong> <br><br> <div> Stop icon: <button> <i class="icon icon-stop"></i> </button> Shutdown icon 2x: <button> <i class="icon icon-2x icon-shutdown"></i> </button> Refresh icon 3x: <button> <i class="icon icon-3x icon-refresh"></i> </button> Search icon 4x: <button> <i class="icon icon-4x icon-search"></i> </button> </div> </center> </body> </html>
Producción:
Iconos de espectro
Ejemplo 3: en este ejemplo, crearemos 4 botones de navegación en diferentes tamaños.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Buttons Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Navigation Size icons Class</strong> <br><br> <div> Downward icon: <button> <i class="icon icon-downward"></i> </button> Caret icon 2x: <button> <i class="icon icon-2x icon-caret"></i> </button> Menu icon 3x: <button> <i class="icon icon-3x icon-menu"></i> </button> Apps icon 4x: <button> <i class="icon icon-4x icon-apps"></i> </button> </div> </center> </body> </html>
Producción:
Iconos de espectro
Referencia: https://picturepan2.github.io/spectre/elements/icons.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA