Genericons Usage

Copy the font folder and the genericons.css file together into your project. Link the CSS in your HTML:

<link href="path/to/genericons.css" rel="stylesheet">

Drop in the following HTML with the name of the icon you want to display:

<div class="genericon genericon-standard"></div>

If you want to insert an icon manually using the :before selector, you can setup CSS rules like the following example. Make sure to set the size to a multiple of 16px or the icons could end up looking fuzzy:

.my-icon:before { content: '\f408'; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 32px/1 'Genericons'; vertical-align: middle; }

Add a matching class to your HTML:

<div class="my-icon">You're a Star!</div>

Here's the result: You're a Star!

Examples

Turn every icon a Salmon color:

.genericon { color: #fa8072; }

Or turn the stars Gold:

.genericon-star { color: #fa8072; }

Use icons for bulleted lists:

• One
• Two
• Three
• Four

<ul class="my-checklist"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>

.my-checklist { list-style-type: none; text-indent: -16px; } .my-checklist li:before { padding-right: 16px; content: '\f418'; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px/1 'Genericons'; vertical-align: text-top; }

Use icons to style blockquotes:

Sometimes I've believed as many as six impossible things before breakfast. —Lewis Carroll

`Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. "Beware the Jabberwock, my son! The jaws that bite, the claws that catch! Beware the Jubjub bird, and shun The frumious Bandersnatch!"

<blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote>

.my-blockquote { background: #eee; border-left: 32px solid #ddd; padding: 10px; } .my-blockquote:before { margin-left: -42px; padding-right: 10px; content: '\f106'; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 32px/20px 'Genericons'; vertical-align: bottom; }

Use icons to style buttons:

<a class="my-button" href="#"><i class="genericon genericon-show"></i> View</a> <a class="my-button" href="#"><i class="genericon genericon-audio"></i> Listen</a>

.my-button { font-family: Helvetica, sans-serif; background: #e05d22; /* Old browsers */ background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */ background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */ background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */ background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */ display: inline-block; padding: 10px 16px 6px 16px; color: #fff; text-decoration: none; border: none; border-bottom: 3px solid #b93207; border-radius: 2px; } .my-button:hover, .my-button:focus { background: #ed6a31; /* Old browsers */ background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */ background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */ background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */ background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */ outline: none; } .my-button:active { background: #d94412; /* Old browsers */ background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */ background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */ background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */ background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */ border: none; border-top: 3px solid #b93207; padding: 6px 16px 10px 16px; }/

CSS Preprocessors

Preprocessing extensions such as Sass (SCSS Syntax) or LESS can make it easier to manage CSS for a lot of things at once using things like variables and mixins.

This example will seup the basic genericon rules and sets a color you can use for all icons using Sass:

$icon-color: "#fa8072"; .genericon { color: $icon-color; } @mixin genericon-rules { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px/1 'Genericons'; vertical-align: middle; } .my-icon:before { content: '\f408'; @include genericon-rules; }

Here is a similar example for LESS:

@icon-color: "#fa8072"; .genericon { color: @icon-color; } .genericon-rules { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px/1 'Genericons'; vertical-align: middle; } .my-icon:before { content: '\f408'; .genericon-rules; }

Fallback images for IE7 and below

Genericons does not come with fallback icons by default -- therefore you have to create them yourself. If you are using HTML similar to this example:

<span class="genericon genericon-warning"></span>

You can use the asterisk hack to serve a different icon to IE7 once you have saved the fallback icons to your project: