What are icon fonts?

Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They’re popular for web designers since you can style them with CSS the same way as regular text. Also, since they’re vector’s they’re easily scale-able. They’re small, so they load quickly and (bonus!) they’re supported in all browsers.

Usually icon fonts are only one color and they’re made to follow a grid, like 16px by 16px or 32x32. Any CSS3 effect looks pretty good on a retina display. Icon fonts are super easy to manipulate with CSS3. Icon fonts are a pretty simple way to workaround for dealing with responsive design. It’s extremely simple to have a text render a different size for different viewport sizes, but it’s much more difficult to resize images.

It’s also simple to change their color or add a shadow to an icon font's shape. There are a few downfalls to using icon fonts. For one, while you can change their color, you can't use more than one color. Simple, clean, monochromatic designs are popular right now, so that's not a huge issue, but it's still something to be aware of. The other issue is with accessibility. While it's pretty simple to make the font icons accessible by putting them in the aria class, it's something that should be remembered. 

You can get icon fonts from a bunch of different places. Three of the most popular are Entypo, Font Awesome, and IcoMoon. You're to use these fonts on your site through the CSS declaration

Entypo is free by CC BY-SA 3.0, so if you'd like to use it you can, but they expect you to include a simple attribution. The Entypo Suite is a package that includes OpenType, TrueType and @font-face fonts. Entypos was created by Danile Bruce and Andreas Blombäck.

Entypo's site has a simple interface and includes a Character map that's a complete reference so that you can easily choose the right icon when you're looking for one. There are more than 250 icons for you to choose from. Entypo 2.0 includes a Social Extension, so you can add social media icons like Twitter, Facebook, Google+, Pinterest, etc.

Font Awesome is free and open source. It was originally designed to work with Bootstrap, but it works well with all frameworks. To use Font Awesome icons, you’ll have to use @fontface and put them inside a <span> or <i> element and then assign them classes.

Something that's pretty great about Font Awesome is that since it's completely open source, there's a lot of support and constant updating. If you have questions you can simply head over to the Community section of their site to look for some answers. There are a bunch of different ways that you can get the Font Awesome icons on your site. They show code snippets to help you understand how to add Font Awesome icons to your site. Font Awesome also provides a bunch of great tips to help you get started with getting them on your site.

IcoMoon offers both free or premium fonts. The free ones are open source, and the premium fonts are paid. IcoMoon also has a web app that makes it possible for you to generate your own font by choosing only the icons that you want. You can even add your own icons to this app that will be included in the font that's produced through their web app.

After you've chosen your icons, IcoMoon will give you an HTML file that shows you exactly how to use your font icon! Entypo is also included as one of the fonts to choose from on IcoMoon. IcoMoon is a fantastic tool to be able to include only the icons that you want on your site. If you're including less icons, your page will load faster.   

Check out Pluralsight's Advanced Typography course to learn more about fonts and typeface design!