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. Aquí, en este artículo, conoceremos los íconos de navegación. Los iconos de Spectre Navigation se utilizan en la barra de navegación o para el menú.
Iconos de Spectre Navigation Clases:
- icon-arrow-up: esta clase de icono se utiliza para mostrar el icono de flecha hacia arriba.
- icon-arrow-right: esta clase de icono se utiliza para mostrar el icono de flecha derecha.
- icon-arrow-down: esta clase de icono se utiliza para mostrar el icono de flecha hacia abajo.
- icon-arrow-left: esta clase de icono se utiliza para mostrar el icono de flecha izquierda.
- icon-upward: esta clase de icono se utiliza para mostrar el icono de dirección hacia arriba.
- icon-forward: esta clase de icono se utiliza para mostrar el icono de dirección hacia adelante (derecha).
- icon-downward: esta clase de icono se utiliza para mostrar el icono de dirección hacia abajo.
- icon-back: esta clase de icono se utiliza para mostrar el icono de dirección hacia atrás (izquierda).
- icon-caret: esta clase de icono se utiliza para mostrar el icono de intercalación (desplegable).
- icon-menu: Esta clase de icono se utiliza para mostrar el icono del menú de hamburguesas.
- icon-apps: esta clase de ícono se usa para mostrar el ícono del cajón de la aplicación.
- icon-more-horiz: esta clase de icono se utiliza para mostrar el icono de tres puntos horizontales.
- icon-more-vert: esta clase de icono se utiliza para mostrar el icono de puntos verticales.
Sintaxis:
<i class="icon Navigation-icon"></i>
Ejemplo: En este ejemplo usaremos todos los iconos de navegación.
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 Navigation icons Class</strong> <br><br> <div class="container"> <div> Arrow Up: <button class="btn btn-success"> <i class="icon icon-arrow-up"></i> </button> Arrow Right: <button class="btn btn-success"> <i class="icon icon-arrow-right"></i> </button> Arrow Down: <button class="btn btn-success"> <i class="icon icon-arrow-down"></i> </button> Arrow Left: <button class="btn btn-success"> <i class="icon icon-arrow-left"></i> </button> </div> <br> <div> Upward: <button class="btn btn-success"> <i class="icon icon-upward"></i> </button> Forward: <button class="btn btn-success"> <i class="icon icon-forward"></i> </button> Downward: <button class="btn btn-success"> <i class="icon icon-downward"></i> </button> Back: <button class="btn btn-success"> <i class="icon icon-back"></i> </button> </div> <br> <div> Caret: <button class="btn btn-success"> <i class="icon icon-caret"></i> </button> Menu: <button class="btn btn-success"> <i class="icon icon-menu"></i> </button> Apps: <button class="btn btn-success"> <i class="icon icon-apps"></i> </button> </div> <br> <div> More-horiz: <button class="btn btn-success"> <i class="icon icon-more-horiz"></i> </button> More-vert: <button class="btn btn-success"> <i class="icon icon-more-vert"></i> </button> </div> </div> </center> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/elements/icons.html#icons-navigation
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA