Using the Spectre.css built-in CSS icon set
Spectre.css has a small but well-chosen set of CSS-only icons
Because they’re pure CSS they contribute little
to page size, keeping your web pages lean and fast.
As is the custom with many other style sheet frameworks,
the italics <i> tag is abused for this purpose.
Using the italics tag to produce italicized text is now frowned upon because it’s not semantic.
Modern developers are expected to use the <em> tag instead of <i>. This frees up the fortuitously named <i> for icons.
How to specify an icon
- Remember to include the
spectre-icons.min.css(orspectre-icons.css) style sheet. - Use icons as you would text. All icons are wrapped inside an
<i>tag and must include two classes:icon(which defines the physical properties common to all Spectre icons) and the class name of the icon itself, for example,icon-timefor the clock icon.
The simplest possible case looks like this:
<i class="icon icon-time"></i>
Or, in full context:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon test | Spectre.css</title>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<!-- Use Spectre's pure CSS icons -->
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
<body>
<i class="icon icon-time"></i>
</body>
File min-icon.html GitHub Source,
Preview
The above code produces this result:
Creating icons in 2x, 3x, or 4x sizes
Specify a size of 2x, 3x, or 4x to make it bigger:
<i class="icon icon-2x icon-time"></i>
<i class="icon icon-3x icon-time"></i>
<i class="icon icon-4x icon-time"></i>
The result:
List of all Spectre.css icons
| Icon | Description | Spectre.css Markdown |
|---|---|---|
| Clock | icon-time | |
| Person | icon-people | |
| Flag | icon-flag | |
| Caret pointing down | icon-arrow-down | |
| Caret pointing up | icon-arrow-up | |
| Caret pointing left | icon-arrow-left | |
| Caret pointing right | icon-arrow-right | |
| Arrow pointing down | icon-downward | |
| Arrow pointing up | icon-upward | |
| Arrow pointing left | icon-back | |
| Arrow pointing right | icon-forward | |
| Solid caret pointing down | icon-caret | |
| Hamburger Menu | icon-menu | |
| Applications | icon-apps | |
| Resize horizontally | icon-resize-horiz | |
| Resize vertically | icon-resize-vert | |
| Horizontal indicator | icon-more-horiz | |
| Vertical indicator | icon-more-vert | |
| Plus | icon-plus | |
| Minus | icon-minus | |
| Checkmark | icon-check | |
| Cross/uncheck | icon-cross | |
| Stop/prohbited | icon-stop | |
| Shutdown/power off | icon-shutdown | |
| Refresh | icon-refresh | |
| Search/magnifying glass | icon-search | |
| Edit | icon-edit | |
| Delete | icon-delete | |
| Share | icon-share | |
| Flag | icon-flag | |
| Bookmark | icon-bookmark | |
| Download | icon-download | |
| Upload | icon-upload | |
| icon-mail | ||
| Message | icon-message | |
| Camera | icon-photo | |
| Link | icon-link | |
| Location (map pin) | icon-location | |
| Emoji | icon-emoji |
Reference
Source code for all Spectre.css icons