Icon Fonts: Pros and Cons of the Font Awesome

Icon fonts are used to include certain standard icons in your website content. The Font ‘Awesome’ is a particularly good example of these that offers many advantages over other icon fonts. Originally designed by Dave Gandy for use with Twitter Bootstrap, Font Awesome can be used with WordPress by using the Font Awesome Icons plugin designed by Rachel Baker.

Here is a brief introduction to such fonts and where the Awesome font fits into a style that may still be in its infancy.

Why Use Icon Fonts

When you design a website, images take up a lot of web space due to their file sizes. They also have to be called up to your web pages using HTML markup. Not only that, but their scaling is frequently a problem, losing definition as they are increased in size. A regular image only resolves as intended when used in its originally designed dimensions.

When you are seeking standard icon images, such as for vehicles, certain punctuation characters or graphical charting icons, icon fonts can offer you scalable images that look the same irrespective of the size of the font. This is just as letters and numbers appear the same irrespective of whether you use a size 2 or 5 or a 10 or 24 point font size.

In many cases, people simply do not use images because of this problem, and their article or online report suffers in detail or clarity because of it. By using Font Awesome, they can add basic icons to their sites and scale them to the required size, limited only by the dimensions of their documents – and they can so without losing definition. You can look upon scalable icons in the same way as scalable font characters.

Here is a selection of the video player and social icons available:

And also the new icons that come with version 3.0:

Each of these can be increased in size with no loss in definition. You can change their color and easily add shadows and change their transparency. In fact you can do anything with them that you can with images, and then some, without the disadvantages of file size.

That is basically what icon fonts can do, and the Awesome font in particular. Here is some information on how to use them and take best advantage of them, and also one or two disadvantages associated with icon fronts:

Using Font Awesome

With Normal Bootstrap CSS:

Font Awesome can be used with the default Bootstrap CSS by copying the Awesome font directory into your project, and then coping font-awesome.min.css into the project. You must then open font-awesome.min.css and edit the font paths to ensure they point to the Awesome location.

In the Head section of your HTML the location of the font-awesome.min.css should be referenced thus:

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

The font path being relative from your CSS directory.

With Bootstrap Less:

If you are using Twitter Bootstrap with LESS CSS, then first copy the Font Awesome font directory into your project, and font-awesome-less into your Bootstrap Less directory. Then:

• a) Open bootstrap.less and replace @import “sprites.less”; with @import “font-awesome.less”;
• b) Open your project’s font-awesome.less and edit the @FontAwesomePath variable to point to your font directory.

@FontAwesomePath:   "../font";

The font path being relative from your compiled CSS directory.

You are then all set – although if you are using a static compiler you should recompile LESS.

Not Using Bootstrap:

If you are not using Bootstrap, then after copying the font file to your project directory you can copy either of the two font-awesome files into your project, open it end then edit the location of the font to point to the font directory.

If you are using Internet Explorer 7, then use font-awesome-ie7.min.css

How to Use Font Awesome in WordPress

There are two easy ways to use icon fonts in WordPress one you have uploaded the plugin*. You can embed them using HTML, or use shortcode. Here are examples of each:

Using HTML: Where you want the font to appear, simply add the name of the item to the class name thus:

<i class="icon-circle"></i>

will add a black circle.

You can change the size of the circle thus:

<div style="font-size: 44px;">
<i class="icon-umbrella icon-circle"></i></div>

You will probably find it easier to add the font size to your CSS stylesheet if you intend using the same size of icon frequently, and the above format for exceptions.

Using Shortcode: Shortcode is easier, but will generally work only for post and page content in post editor screen. The format is [icon name=icon-circle] where you want the circle.

The Downside of Icon Fonts

Icon fonts seem great to use when you have a need to add a specific icon to your blog or website, and they can be linked to carry out specific functions. However, not everything is perfect, and icon fonts also have disadvantages. These are the common problems that are reported by users of icon fonts that do not apply to Font Awesome – that’s why it’s so ‘Awesome!’

1. One is the potential problem with screen readers that might read aloud the icon as an alphabetical letter. This is not a problem with Font Awesome due to the way the font characters are retrieved.
2. They can be presented in only a single color – or in a color gradient using CSS3 gradients. Is that a genuine problem with icon fonts?
3. It can take time to create a custom font to suit your needs. However, there is already a large selection of awesome fonts offered by Font Awesome, and the list is continually being expanded. Although it is free closed source font, approved fonts designed by users are added regularly.

Font Awesome Generator Summary

The Font Awesome generator is one of the best free icon fonts currently available. Although it was designed for use with Twitter Bootstrap, it can be adapted for use on regular websites and there is also a WordPress plugin available that offers the best of this icon font. If you use icon fonts, then give the Font Awesome a try because you might be pleasantly surprised once you have mastered it.

* The Font Awesome Icons WordPress plugin is available from https://github.com/rachelbaker/