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 Navigation icons. Spectre Navigation icons are used in navbar or for menu.
Spectre Navigation icons Classes:
- icon-arrow-up: This icon class is used to display up arrow icon.
- icon-arrow-right: This icon class is used to display right arrow icon.
- icon-arrow-down: This icon class is used to display down arrow icon.
- icon-arrow-left: This icon class is used to display left arrow icon.
- icon-upward: This icon class is used to display up direction icon.
- icon-forward: This icon class is used to display forward(right) direction icon.
- icon-downward: This icon class is used to display down direction icon.
- icon-back: This icon class is used to display backward(left) direction icon.
- icon-caret: This icon class is used to display caret(dropdown) icon.
- icon-menu: This icon class is used to display hamburger menu icon.
- icon-apps: This icon class is used to display icon app drawer icon.
- icon-more-horiz: This icon class is used to display three horizontal dots icon.
- icon-more-vert: This icon class is used to display vertical dots icon.
Syntax:
<i class="icon Navigation-icon"></i>
Example: In this example we will use all the navigation 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 Navigation icons Class</strong>
<br><br>
<div class="container">
<div>
Arrow Up:
<button class="btn btn-success">
<i class="icon icon-arrow-up"></i>
</button>
Arrow Right:
<button class="btn btn-success">
<i class="icon icon-arrow-right"></i>
</button>
Arrow Down:
<button class="btn btn-success">
<i class="icon icon-arrow-down"></i>
</button>
Arrow Left:
<button class="btn btn-success">
<i class="icon icon-arrow-left"></i>
</button>
</div>
<br>
<div>
Upward:
<button class="btn btn-success">
<i class="icon icon-upward"></i>
</button>
Forward:
<button class="btn btn-success">
<i class="icon icon-forward"></i>
</button>
Downward:
<button class="btn btn-success">
<i class="icon icon-downward"></i>
</button>
Back:
<button class="btn btn-success">
<i class="icon icon-back"></i>
</button>
</div>
<br>
<div>
Caret:
<button class="btn btn-success">
<i class="icon icon-caret"></i>
</button>
Menu:
<button class="btn btn-success">
<i class="icon icon-menu"></i>
</button>
Apps:
<button class="btn btn-success">
<i class="icon icon-apps"></i>
</button>
</div>
<br>
<div>
More-horiz:
<button class="btn btn-success">
<i class="icon icon-more-horiz"></i>
</button>
More-vert:
<button class="btn btn-success">
<i class="icon icon-more-vert"></i>
</button>
</div>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://picturepan2.github.io/spectre/elements/icons.html#icons-navigation