Spectre Avatar icons

Spectre Avatar icons offers us to include image as an icon. To include the image as an icons first you need to include the image then have to put the class of avatar-icon in that tag.

Spectre Avatar icons Class:

avatar-icon: This class is used to set the included image into avatar icon.

Below example illustrate the Spectre Avatar icons:

Syntax:

<figure class="avatar avatar-xl">
  <img src="... alt="...">
  <img src="..." 
       class="avatar-icon" 
       alt="...">
</figure>

Example: In this example we will use gfg image as an avatar logo.

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">w3wiki</h1>
    <strong>SPECTRE Avatar icons Class</strong>
    <br><br>
    <div>
        <strong>w3wiki</strong>
        <figure class="avatar">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png"
                 alt="GeekdforBeginner">
            <img src=
"https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png"
                 class="avatar-icon"
                 alt="GeekdforBeginner">
        </figure>
         
<p>A Computer Science Portal for Beginner</p>
 
    </div>
    </center>
</body>
 
</html>

Output:

Reference: https://picturepan2.github.io/spectre/components/avatars.html#avatars-icons

HTML

Contact Us