Using icon fonts

When I talked with some people about icons fonts they seemed surprised because it's a very easy feature that improves the performance of the page, preventing to load an image, or images. For example, sprites.
Not many people use icon fonts. So, I write some steps that I followed to get the icon fonts of my website.

Introduction
For a long time, we use sprites as a method to render images in our website, to improve performance preventing loading images and send http requests. It's important to know that sprites are not a invalid method, but maybe, for example, retina displays, our icons can displayed pixelated.
If you zoom the browser, this images are showed pixelated too. So, there are some problem with sprites.
Icon fonts appears to prevent this kind of problem, and improve our site performance.

Getting icons
The best option is to ask our designer to create icons. But in some cases, we don't have one. So, we can take one in webpages. There is a list of some pages which you can take free icons to your website:

• http://fontello.com/
• http://weloveiconfonts.com/
• http://flaticon.com/
• http://typicons.com/
• http://css-tricks.com/flat-icons-icon-fonts/

Create our icon font
There are lots of webpages which helps us to create an icon font. But I recommend icomoon because it's really easy to use.

There are some steps to follow:

• Go to icomoon app
• Click in "import icons" button at the top right of the page
• Choose your icons and click in the "font" button at the bottom of the page
  
• Finally, click in the "download" button to download your icon font.

Changing your downloaded icon font

If you see the style.css file, you can view this styles:

We can refactor and improve this code if we consider that it's better if we use a class for the icons.
Also we should change the name of the font and the files, but it's no essential.
The final css should be:

We choose a class to improve our styles performance.
If we want to draw the newspaper icon, we only need this:

And, of course, we can theme it.

Conclusions
Icon fonts is an easy good practice that we can apply in our project. Forget sprites and modernize your front-end. We can theme our icons adding colors, backgrounds, font sizes. For example if we set an icon with font size 30em, we can not view a pixelated image, we'll view a svg image valid of course in retina displays.
I strong recommend use it.