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 objetos. Los iconos de Spectre Object se utilizan en cualquier elemento relacionado con un objeto.
Iconos de objetos de espectro Clases:
- icon-mail: esta clase se utiliza para mostrar el icono de correo.
- icon-people: esta clase se utiliza para mostrar el icono de personas.
- icon-message: esta clase se utiliza para mostrar el icono de mensaje (texto).
- icon-photo: esta clase se utiliza para mostrar el icono de la foto (galería).
- icon-time: esta clase se utiliza para mostrar el icono de la hora (reloj).
- icon-ubicación: esta clase se utiliza para mostrar el icono de ubicación.
- icon-link: esta clase se utiliza para mostrar el icono de enlace.
- icon-emoji: esta clase se utiliza para mostrar el icono emoji (smiley).
Sintaxis:
<i class="icon Object-icon"></i>
Ejemplo: En este ejemplo, utilizaremos todos los iconos de objetos.
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 icons Class</strong> <br><br> <div class="container"> <div> Mail: <button class="btn btn-success"> <i class="icon icon-mail"></i> </button> People: <button class="btn btn-success"> <i class="icon icon-people"></i> </button> Message: <button class="btn btn-success"> <i class="icon icon-message"></i> </button> Photo: <button class="btn btn-success"> <i class="icon icon-photo"></i> </button> </div> <br> <div> Time: <button class="btn btn-success"> <i class="icon icon-time"></i> </button> Location: <button class="btn btn-success"> <i class="icon icon-location"></i> </button> Refresh: <button class="btn btn-success"> <i class="icon icon-refresh"></i> </button> Emoji: <button class="btn btn-success"> <i class="icon icon-emoji"></i> </button> </div> </div> </center> </body> </html>
Producción:
Iconos de objetos de espectro
Referencia: https://picturepan2.github.io/spectre/elements/icons.html#icons-object
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA