Los íconos de Spectre Avatar nos ofrecen incluir una imagen como un ícono. Para incluir la imagen como ícono, primero debe incluir la imagen y luego colocar la clase de icono de avatar en esa etiqueta.
Iconos de avatar de Spectre Clase:
- avatar-icon: esta clase se utiliza para configurar la imagen incluida en el icono de avatar.
El siguiente ejemplo ilustra los íconos de Spectre Avatar:
Sintaxis:
<figure class="avatar avatar-xl">
<img src="... alt="...">
<img src="..."
class="avatar-icon"
alt="...">
</figure>
Ejemplo: En este ejemplo, usaremos una imagen gfg como logotipo de avatar.
HTML
<!DOCTYPE html> <html> <head> <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 Avatar icons Class</strong> <br><br> <div> <strong>Geeksforgeeks</strong> <figure class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" class="avatar-icon" alt="Geekdforgeeks"> </figure> <p>A Computer Science Portal for Geeks</p> </div> </center> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/components/avatars.html#avatars-icons
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA