Mar 11 2013

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

Advertisement

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…

genericons-w550

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.

Upscaled Genericons, still decent looking

Upscaled Genericons, still decent looking

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* =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:

1
2
3
4
5
6
7
.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:

1
<link href=„pfad/genericons.css" rel="stylesheet"/>

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

1
<div class="genericon genericon-comment">This is a comment</div>

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

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Shemul, 12 November 2013

    I dont understand where to put the font folder. I have put it here: public_html/wp-content/themes. I use genesis and eleven40 child themes. can you show me the screenshot of your cpanel? I will be great ful .I use simple social icons plugins. This plugins also add the Genericons fonts.

search form
 
image description image description