Skip to content. | Skip to navigation

Navigation

Eye-catching Design.
Powerful Websites.
Effective Exposure.

Font Icons

by Ed 09/18/14

Have you ever seen a set of icons displayed on a web page before? Of course you have... so were they images or fonts? Well the truth is they could be either; icon fonts have become popular on the web in a short time and carry some advantages over using images or sprites. If you are considering using them in your projects or unsure of the concept then carry on reading.

What is an Icon Font?

An icon font is actually a font, but rather than containing letters or numbers, it comprises of symbols and glyphs. Icon fonts can be styled with CSS exactly the same as regular text (one of the pros that have made them so popular).

There are plenty of convincing reasons to switch to font icons:

  • You can apply any CSS effects to them.
  • Because they are vector graphics, they’re scalable. That means you can scale them up or down without loss of quality.
  • A single HTTP request is used to load them rather than the possibility of multiple requests when using bitmap images.
  • They load fast because of their small size.
  • Cross browser support (even back to IE6!).

Of course they also have limitations. In cases where you want to show a complex image instead of a simple icon, then icon fonts aren’t going to be the answer. Because they are fonts another limitation is colour (unless you apply some CSS hacks).  

There are some great tools available for creating custom font icons (icon vault and Fontello to name a couple) and there are loads around that are free and ready to use (check out Font Awesome).

As an aside it’s worth mentioning that SVG icons have the ability to overcome some of the limitations of font icons but we’ll save that for another day.

For those now sold on the concept; let’s see how we can implement them on a web page. For simplicity we’ll use the set provided by Font Awsome.

  1. Copy the font-awesome directory into your project.
  2. In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

 

No let's say we have a list like this one:

<ul class="myList">
  <li>Image</li>
  <li>Spreadsheet</li>
  <li>Word Document</li>
</ul>

 

If we were not using font icons here we would have to produce at least three images and then bloat the CSS file declaring a background for each list item. With Font Awesome we can easily adjust the markup to:

<ul class="myList">
  <li class="fa fa-file-image-o">Image</li>
  <li class="fa fa-file-excel-o">Spreadsheet</li>
  <li class="fa fa-file-word-o">Word Document</li>
</ul>

 

The result:

  •   Image
  •   Spreadsheet
  •   Word Document

 

As briefly touched on, there will be instances where font-icons are not the appropriate solution. However, should the criteria fit there really isn't any reason for not using them.