I believe that icon fonts are one of the greatest ideas ever born in the golden age of web design. Some great guys at Automattic probably feel the same way, since they decided to come up with a nice icon font named Genericons. In this article, we're going to learn how awesome icon fonts are and how to make use of the Genericons font.

The Importance of Icon Fonts

As I said, we're living in the golden age of web design. New technologies are born every day and browsers quickly adopt them. In addition to the new technologies, there are new design techniques coming forward all over the world.

In this golden era, responsive web design is arguably one of the most popular concepts. In a world full of different devices that connect to the Internet like laptops, tablets and smartphones, shaping our designs according to the device dimensions and pixel densities. As web designers, it has become a daily habit to move elements and scale graphics to make our design work in a variety of devices, from 27-inch Apple monitors to Kindles.

That's where icon fonts come in handy.

Advantages of Using Icon Fonts

As a gift from responsive web design, icon fonts are used to offer an optimized and scalable pack of graphics to visitors on any device. Plus, their cross-browser compatibility lets us make them work even on old browsers so our grandparents and the folks at the DMV can also enjoy crisp, brand new icons!

Joking aside, here are the main advantages that you can benefit from with an icon font:

• Icon fonts are scalable. This means that no matter how big your icon gets, you don't have to compromise on image quality or file size.
• Icon fonts can be enhanced with simple lines of CSS. You don't have to open your big ol' image editor to change their colors or add shadows to them. Transparency? Check. CSS gradients? Check. 3D rotation? Check. You get the idea. With a few lines of CSS code, you can do almost everything that you can do to your text. After all, these icons are technically bits of text.
• Icon fonts have awesome browser support. Since they're fonts and even Internet Explorer 7 supports fonts, you don't have to worry about whether they're going to fail to appear on older browsers.
• Icon fonts are small in file size. This may sound like a controversial argument (since a pack of PNG icons could be almost as small as icon fonts), but you can see that the WOFF format of Genericons, for example, is just 11KB in file size. Plus, you have to include things like my-icon-2x.png if you need larger images. Also, icon fonts make only one HTTP request.

Using Genericons

Genericons is a pretty great icon font created by Automattic, also the founders of WordPress. The font includes 121 icons as of the end of 2013, and it's growing every once in a while. It's also licensed with the GPL, so we can use this sweet pack of icons in all our open source projects with compatible licenses.

If you're not using an icon font in your WordPress website, now could be the time to include Genericons!

Including It in Your Theme

If you want to use this icon font in your theme, there are just a few simple steps to follow:

1. Download Genericons by clicking the giant Download button on the website.
2. Upload the font folder into your theme's root folder. If you want, you can rename the folder and put it inside another folder.
3. Copy the contents of the genericons.css file into your theme's style.css file. (If you changed the name and path of the font folder, don't forget to make changes in the CSS in order to fix the path of the font files.)

That's it, your theme is now 100% Genericons compatible! You can now use the icons in your HTML elements like this:

<a class="genericon genericon-tablet" href="http://tutsplus.com/">This link has the tablet icon!</a>

If you want to use an icon as a separate element, you need to use the <i> HTML element, like this:

<a href="http://tutsplus.com/"><i class="genericon genericon-tablet"></i> This link also has the tablet icon!</a>

Notice that you need to use two CSS classes: genericon and genericon-{icon-name}. I'm not going to paste the icon names into this article (because new icons are being added to the font regularly) but you can see a categorized list of icon names inside the genericons.css file. Alternatively, you can check genericons.com and click on each icon to see the relevant name.

Using It With the Genericon'd Plugin

If you don't want to integrate the font into your theme and use the icon pack with a separate plugin instead, you can use the Genericon'd plugin at wordpress.org.

The usage is almost the same—you just need to add another class named genericond:

<a class="genericond genericon genericon-tablet" href="http://tutsplus.com/">This link has the tablet icon!</a>
<a href="http://tutsplus.com/"><i class="genericond genericon genericon-tablet"></i> This link also has the tablet icon!</a>

Alternatively, you can use a shortcode:

<a href="http://tutsplus.com/">[genericon icon=tablet] This link has the tablet icon, too!</a>

Notice that you only need to use the icon name this time.

Conclusion

Icon fonts are popular for a number of reasons: their scalability, ease of use, and backwards compatibility. With a small-sized file, every web designer and developer can benefit from this awesome little technique.

What do you think about Genericons? Share your comments with us below! And if you liked the article, share it to let your friends know about Genericons, too!