1 step to setting typography icons with FontAwesome

What’s the difference between this: twiticon and: ??

That the latter one is a vector font, not an icon. You can appreciate this better when you observe at the fact that vectors can be enlarged infinitely, whereas icons get pixelated:

twiticon Vs.      

And as you might have guessed, the repertoire for this font must be big (369 icons and growing) to suit all of your needs. In fact, if you think about it, most of the more common icons you are accustomed to see are pretty consistent, like:

This is a good thing regarding User Experience because your users will already know what’s most probably hidden behind each of you icon indicators.

Ok, but how do we use this font?

1. Make your website aware of FontAwesome

You could download its css and link it right in the <head>, or the judo solution would be to hotlink like this:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Oh my god, that’s it! You’re ready!

How to use this font

You can place Font Awesome icons just about anywhere.
Link to the examples: http://fortawesome.github.io/Font-Awesome/examples/
Link to the list of available icons: http://fortawesome.github.io/Font-Awesome/icons/

Basically adding a tag like:

<i class="fa fa-camera-retro"></i>

will add an icon like:

You can always style differently your tag with style attributes, separate css or even with custom rules like:

<i class="fa fa-camera-retro fa-3x"></i>

where fa-3x will make the icon 3 times bigger.

Other ways of using FontAwesome

What FontAwesome is doing is applying the FontAwesome font-family to the ::before pseudo element of any element that has a class that starts with “icon-“.

[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;


.icon-cut:before {
  content: "\f0c4";

Where this content code corresponds to the Unicode code of the character. So if you’re looking to insert ::before and/or ::after classes using this technique and already realised that their content attribute was not going to accept your html, click on the icon you want and look out for these codes here:


And what’s the best of all?

No javascript needed!

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.