El Icon.css es un elemento único que responde a los iconos css puros. Hay tres tipos de iconos: iconos de navegación, iconos de acción e iconos de objeto. Podemos manipular el tamaño del ícono usando esta clase.
Clase de tamaño de icono de espectro:
- icon-2x: Esto se usa para duplicar el tamaño del icono normal.
- icon-3x: Esto se usa para triplicar el tamaño del icono normal.
- icon-4x: Esto se usa para 4 veces el tamaño del icono normal.
Nota: Puede usar el tamaño de fuente para cualquier tamaño específico.
Sintaxis:
<i class="icon icon-2x icon-name"></i>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Icons 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 icons Class</strong> <br><br> <div> Mail icon 2x: <button> <i class="icon icon-2x icon-mail"></i> </button> Mail icon 3x: <button> <i class="icon icon-3x icon-mail"></i> </button> Mail icon 4x: <button> <i class="icon icon-4x icon-mail"></i> </button> </div> </center> </body> </html>
Producción:
Tamaño del icono de espectro
Referencia: https://picturepan2.github.io/spectre/elements/icons.html#icons-sizes
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA