Open In App

Spectre Avatar icons

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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=
                 alt="Geekdforgeeks">
            <img src=
                 class="avatar-icon"
                 alt="Geekdforgeeks">
        </figure>
         
<p>A Computer Science Portal for Geeks</p>
 
    </div>
    </center>
</body>
 
</html>


Output:

Spectre Avatar icons

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



Last Updated : 11 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads