Skip to content
Related Articles

Related Articles

Spectre Object icons

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Feb, 2022
View Discussion
Improve Article
Save Article

The Icon.css is a single element which is responsive and pure css icons. There are three types of icons Navigation icons, Action icons, and Object icons. Here in this articles we will know about the Object icons. Spectre Object icons are used on any object related element. 

Spectre Object icons Classes:

  • icon-mail: This class is used to display the mail icon.
  • icon-people: This class is used to display the people icon.
  • icon-message: This class is used to display the message(text) icon.
  • icon-photo: This class is used to display the photo(gallery) icon.
  • icon-time: This class is used to display the time(clock) icon.
  • icon-location: This class is used to display the location icon.
  • icon-link: This class is used to display the  link icon.
  • icon-emoji: This class is used to display the emoji(smiley) icon.

Syntax:

<i class="icon Object-icon"></i>

Example: In this example, we will use all the object icons.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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>

Output:

Spectre Object icons

Spectre Object icons

Reference: https://picturepan2.github.io/spectre/elements/icons.html#icons-object


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!