Spectre Icon size

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. We can manipulate the size of the icon by using this class.

Spectre Icon size Class:

icon-2x: This is used to double the size of the normal icon size.
icon-3x: This is used to triple the size of the normal icon size.
icon-4x: This is used to 4times the size of the normal icon size.

Note: You can use font-size for any specific size.

Syntax:

<i class="icon icon-2x icon-name"></i>

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE CSS Icons Class</title> 
    <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 Object  icons Class</strong> 
        <br><br> 
            <div> 
                Mail icon 2x: 
                <button> 
                 <i class="icon icon-2x icon-mail"></i> 
                </button> 
                Mail icon 3x: 
                <button> 
                <i class="icon icon-3x icon-mail"></i> 
                </button> 
                Mail icon 4x: 
                <button> 
                <i class="icon icon-4x icon-mail"></i> 
                </button> 
            </div> 
     </center> 
</body> 
  
</html> 

Output:

Spectre Icon size

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

HTML

Contact Us