How To: Genericons – 62 Vector Icons Webfont by WordPress Creators Automattic

Not only do we see a massive growth in the number of mobile devices, also the capabilities of these little handsets improve with every new generation. It's an irreversible trend, commonly known as HiDPI, that causes lots of work not only, but also for web designers. If you have ever had the pleasure of looking at a non-retina app on one of the new MacBooks Pro, you know what I'm talking about. WordPressers Automattic made sure that their blogging software got equipped with retina-capable iconry during the latest update. A few days ago they published Genericons, an icon webfont made up of vectorized symbols...

Vectors, Icons, Webfonts - Ways Of The Future

Genericons are released under the GNU public license, thus being freely available to everybody and every use case. Automattic has created a dedicated website and positions Genericons as a free, GPL, flexible icon font for blogs. This is definitely true, though I don't see any limitations as to other use cases. In fact Genericons are generally useful on any given website.

A 54kb heavy download leaves a zip file on your local hard-drive. This file contains everything needed to implement Genericons as a webfont, CSS, EOT, SVG and TTF, as well as elaborate example presentations. Additionally Genericons is delivered as a font in OTF format to be used in desktop software products such as Photoshop or InDesign or Fireworks or wherever you see it fit.

Genericons can be scaled freely, which makes them suitable for any kind of HiDPI devices. Implementation into your own web project is simple and can be achieved in two possible ways. What is always needed is the upload of the folder font (from the download) into the stylesheet-folder of your project.

a) Equip your main stylesheet with font-related functionality

One method is copying the following code into your main stylesheet:

/* =Genericons, thanks to FontSquirrel.com for conversion!
-------------------------------------------------------------- */
@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Then you can define icon-usage like this:

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

This definition achieves to show a comment icon in front of each element equipped with the class my-icon. The selection of the respective icon is done using a value such as f101 for the parameter content.

The website of the project is not limited to being a download resource for the Genericons. Moreover it is designed to be a helper application for finding the proper codes and values needed to address the icons correctly. This is easy, too. Simply click on the icon, you wish to use, than choose Copy CSS and copy the code presented to you in the popup that then opens.

b) Usage of Genericons.css

Alternatively you can opt for an even easier method, which exists in using the stylesheet genericons.css in addition to the folder font. First, you'd embed the stylesheet:

Now icons can be adressed not via cryptical values but via human-readable names, like so:

This is a comment

In that example we'd again be calling the above-mentioned comment icon. Instead of using the value f101 we call it human readable using genericon-comment.

Again the helper on the Genericons website proves useful. We click the desired icon, choose Copy HTML and copy the info from the popup to our document. Icons can of course be attached not only to div elements. So change the HTML snippet accordingly.

Pseudo selectors cannot be addressed via this method. Use procedure a) or enhance the genericons.css as you see fit.

A general hint: Genericons are designed to fit a 16px grid. To have them look best, scale them only in multiples of 16, such as 32 or 48px. Stay away from uneven numbers such as 17px. Genericons will not delight the eye in that case.

One more thing: There's no fallback for IE 7 and below. You'll have to care for that by yourself. Genericons does not offer anything, neither in the CSS nor does it deliver alternative icons as PNG.

Related Links

• — A free, GPL, flexible icon font for blogs! | Genericons.com