Open In App

Spectre Action icons

Last Updated : 09 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 Action icons. Spectre Action icons are used on any action related buttons. 

Spectre Action icons Classes:

  • icon-resize-horiz: This class is used to display the resize icon in horizontal.
  • icon-resize-vert: This class is used to display the resize icon in vertical.
  • icon-plus: This class is used to display the plus icon.
  • icon-minus: This class is used to display the minus icon.
  • icon-cross: This class is used to display the cross icon.
  • icon-check: This class is used to display the check icon.
  • icon-stop: This class is used to display the stop icon.
  • icon-shutdown: This class is used to display the shutdown icon.
  • icon-refresh: This class is used to display the refresh icon.
  • icon-search: This class is used to display the search icon.
  • icon-flag: This class is used to display the flag icon.
  • icon-bookmark: This class is used to display the bookmark icon.
  • icon-edit: This class is used to display the edit icon.
  • icon-delete: This class is used to display the delete icon.
  • icon-share: This class is used to display the share icon.
  • icon-download: This class is used to display the download icon.
  • icon-upload: This class is used to display the upload icon.
  • icon-copy: This class is used to display the copy icon.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Icons 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 Action icons Class</strong>
        <br><br>
        <div class="container">
            <div>
                Resize-horiz:
                <button class="btn btn-success">
                 <i class="icon icon-resize-horiz"></i>
                </button>
                Resize-vert:
                <button class="btn btn-success">
                <i class="icon icon-resize-vert"></i>
                </button>
                Plus:
                <button class="btn btn-success">
                <i class="icon icon-plus"></i>
                </button>
                Minus:
                <button class="btn btn-success">
                <i class="icon icon-minus"></i>
                </button>
                Cross:
                <button class="btn btn-success">
                    <i class="icon icon-cross"></i>
                </button>
                Check:
                <button class="btn btn-success">
                    <i class="icon icon-check"></i>
                </button>
            </div>
            <br>
            <div>
                Stop:
                <button class="btn btn-success">
                 <i class="icon icon-stop"></i>
                </button>
                Shutdown:
                <button class="btn btn-success">
                    <i class="icon icon-shutdown"></i>
                </button>
                Refresh:
                <button class="btn btn-success">
                    <i class="icon icon-refresh"></i>
                </button>
                Search:
                <button class="btn btn-success">
                    <i class="icon icon-search"></i>
                </button>
                Flag:
                <button class="btn btn-success">
                    <i class="icon icon-flag"></i>
                </button>
                Bookmark:
                <button class="btn btn-success">
                    <i class="icon icon-bookmark"></i>
                </button>
            </div>
            <br>
            <div>
                Edit:
                <button class="btn btn-success">
                    <i class="icon icon-edit"></i>
                </button>
                Delete:
                <button class="btn btn-success">
                    <i class="icon icon-delete"></i>
                </button>
                Share:
                <button class="btn btn-success">
                    <i class="icon icon-share"></i>
                </button>
                Download:
                <button class="btn btn-success">
                    <i class="icon icon-download"></i>
                </button>
                Upload:
                <button class="btn btn-success">
                    <i class="icon icon-upload"></i>
                </button>
                Copy:
                <button class="btn btn-success">
                    <i class="icon icon-copy"></i>
                </button>
            </div>
        </div>
 
    </center>
</body>
 
</html>


 

 

Output:

 

Spectre Action icons

Spectre Action icons

 

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

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads