How to Use Icon Fonts in Your Website

Icon fonts are quickly becoming a web design trend and there is a good reason for that. Creating icons with icon fonts gives designers the ability to manipulate the icons with CSS. The days of creating two different icon images for rollovers or effects are long gone. Now we can easily change color, size, and even animate the icons just as we would most other HTML elements.

Aside from giving designers and developers more control, icon fonts also offer many features that bitmap image icons simply do not. Because the icon is a font, it has the same properties as all other fonts. That means it is completely vector and scales perfectly no matter the size. This is extremely valuable considering the increasing popularity of the retina/Hi-DPI devices.

SEE ALSO: 50 Time-Saving Web Design – Developer Tools

Here is a demonstration of how icon fonts look scaled up compared to bitmap icons.

How to Use Icon Fonts in Your Website

As you can see, the bitmap icons get pixelated while the vector font icons scale up fine and look as sharp and precise as they did in a smaller size. This demonstration applies to general bitmap vs. vector graphics as well.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

One other advantage we get with icon fonts is load time. Once the icon font is loaded, you have access to every icon in it. That means if the icon font has 50 icons, it will only be one server call rather than 50 server calls. Things like CSS sprites can be only one server call too, but they are much more time-consuming to manage and maintain. Plus they do not have vector qualities like icon fonts do.

So let’s go over how to implement icon fonts in your website. For my examples, I will use the Unicons icon pack and the web font that comes with it.

Step 1: Load The Font via @font-face

This is the same process as loading any other font using the @font-face method. You are simply giving the font a name to be used throughout the stylesheet and specifying the correct location of the font files.

@font-face {
	font-family: 'unicons';
	src:url('fonts/unicons.eot');
	src:url('fonts/unicons.eot?#iefix') format('embedded-opentype'),
		url('fonts/unicons.svg#unicons') format('svg'),
		url('fonts/unicons.woff') format('woff'),
		url('fonts/unicons.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

Step 2: Create CSS Rules That Apply to Every Icon

Now that we are loading the font into our website, we can start to define some other rules which will impact how our icons look. We will use the pseudo class :before because we do not want the markup to be in our HTML code. I like to name the main icon class something generic and straightforward, like “icon”.

.icon:before {
	font-family: "unicons", sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-o-transform: scale(1);
	text-rendering: optimizeLegibility;
}

Explanation for each of these CSS properties and their values

  • font-family – We are simply specifying what font to use.
  • webkit-font-smoothing – Using antialiased value for font smoothing will make the icons look smoother, especially on darker backgrounds.
  • o-transform – Using scale(1) ensures us that the icon will be sized appropriately in Opera.
  • text-rendering – We use optimizeLegibility when we want to enable more advanced font features, like ligatures and more accurate kerning.

Feel free to play around with the last three properties and adjust them to work best for you and your website. The only property that is absolutely crucial is the font-family as that defines what font our icons will use. If you leave that as a default font, you will see the actual characters instead of the icons.

Step 3: Create Specific Icon Classes

This is the fun part. We are going to define all icon classes and which characters they will use. We are given the HEX values of each character in the demo CSS file provided when you purchase the Unicons icon pack. So now we just have to specify them in our stylesheet.

This is the basic syntax we will use for each icon:

.facebook:before {content: "CHARACTER";}

Using this syntax and the HEX value shown in the demo CSS file, we would have something like this:

.facebook:before {content: "\e06b";}

This creates the icon for us. Note that the HEX value is actually only “e06b”, but when used inside the content property, we have to escape the HEX value. If we didn’t escape the characters, it would just print out the literal characters instead.

Step 4: HTML Mark-up

Thankfully, there is not much HTML mark-up. We are simply going to use an HTML element such as span and add appropriate classes to it.

<span class=”icon facebook”>Like Us On Facebook</span>

And now the icon should be showing up!

Step 5: Customize Your Icons

Now you can start having more fun with these icons. For example, if you wanted to change color or size of the icon, you could just specify color or font-size in the main icon class. If you need multiple colors or sizes, you could simply have multiple CSS classes as shown below.

.icon-green:before {color: #008000;}
.icon-red:before {color: #ff0000;}
.icon-blue:before {color: #0000ff;}
.icon-yellow:before {color: #ffff00;}

.icon-12:before {font-size: 12px; margin-right: 3px;}
.icon-24:before {font-size: 24px; margin-right: 6px;}
.icon-36:before {font-size: 36px; margin-right: 9px;}
.icon-48:before {font-size: 48px; margin-right: 12px;}

And then your HTML mark-up would be something like this:

<span class=”icon facebook icon-blue icon-36”>Like Us On Facebook</span>

Keep in mind that you can use just about any CSS property to manipulate your icon fonts. Another thing to remember is that if you want the icon after your text, you should use the CSS pseudo class :after instead.

It all depends on how you want to use icons on your website. If you just want to display an icon without any additional content, you can have an empty HTML tag with specific icon classes.

If you decide to only show an icon, I would highly suggest you keep content in there as a descriptor as well for SEO purposes. You can hide the additional content by using something like below:

.icon {
	text-indent: -9999px;
}

Note that we are applying this style to the actual icon class and not the pseudo element :before. That is because we want to indent the content of our HTML element, but not the icon.

Other Methods

There are some other techniques that you can use to implement the icon fonts. CSS Tricks has a very good article about using the data attribute to load the icons on your website. My main concern with this method is that the icon is tied to the HTML mark-up and if you’re using an icon on multiple pages and one day you need to change it, you have to go through all of those pages manually in order to change it. It defeats the purpose of CSS, somewhat. Using the method I showed above, all you would have to do is change the font name and character of the icon and it would be all set! In addition, we are using the icon font as style rather than content, so in my opinion, it should not be in the HTML mark-up at all.

If you use the data attribute method, you are a little more screen reader friendly, but it is still not bulletproof. You will have to decide for yourself what is more important for you and your website.

Haris Bacic

Haris Bacic is the head of creative and SEO strategy at AdFicient, a search engine marketing and business development agency. If you enjoyed reading this article, you can also follow him on Twitter at @HarisBacic where he tweets about all things related to design, code, and SEO.

Newsletter

10 Comments
  1. William Rennie Jan 17, 1:51 pm

    I am a student who likes to freelance and I’m always reading up on new trends. Hopefully this year there will be loads of new features being fully browser supported and stuff like icon fonts is really exciting to be able to use!

    Will.

    Reply
    +7
  2. Colir Jan 17, 3:08 pm

    You learn me something with this declaration :
    -webkit-font-smoothing: antialiased;
    > ok, but i really never see the difference
    -o-transform: scale(1);
    > i didn’t know that Opera must have this
    text-rendering: optimizeLegibility;
    > I don’t understand what is for
    Can you please make an example with and without ?

    Thanks for sharing. Your always a good source of knowledge.

    Reply
    +4
    • Haris Bacic Jan 17, 9:55 pm

      Colir, thanks for asking.

      -webkit-font-smoothing: antialiased
      > This only applies to webkit browsers like Chrome and Safari. The difference is very subtle and mostly only visible on dark backgrounds and lighter text.

      -o-transform: scale(1);
      > You don’t need to have it with Opera, but it is just good to have it as a precaution so that the icon is always scaled correctly.

      text-rendering: optimizeLegibility;
      > This adjusts spacing between letters (kerning). So if you had 3 icons in a row, or 3 letters in general, it would adjust spacing to look more appealing. Firefox does this automatically already.

      Here’s a good article from that explains how it works:
      http://www.usabilitypost.com/2012/11/06/optimize-legibility/

      Reply
      +5
  3. Michael Jan 18, 8:06 am

    Very well-written piece! One of the most clear explanations of how to use icon fonts(and why) I’ve seen (and I’ve seen a lot!) Thanks for taking the time to write this up!

    Reply
    +4
  4. Manuel Jan 18, 4:34 pm

    Nice one!
    I use the same with fontawesome since few months not.
    Putting the font size to fixed pixels makes it easier for IE7 to 9.

    Pity is, that you got problems running it for Windows mobile 7 and also some browsers have huge printing problems. If you Haris Bacic have some bugfixes for this, lemme know :)

    Cheers Manuel

    Reply
    -3
  5. George Jan 21, 4:27 pm

    What about the difference between a bitmap icon sized 1/2 and font icon sized 1/2 ? How can we make it look good on smaller sizes too ? ( on windows especially).

    Reply
    -1
    • Haris Bacic Jan 21, 8:24 pm

      Hi George, the font icon will look good at any size because it is vector. You shouldn’t need to do anything else.

      Reply
      +1
  6. Edson Feb 8, 4:56 pm

    Hi! Can I use -webkit-font-smoothing: antialiased; -o-transform: scale(1); and text-rendering: optimizeLegibility; in the body tag?

    Reply
    0
    • Haris Bacic Feb 8, 5:45 pm

      Yes you can, but I wouldn’t recommend that as it might slow down the page rendering time. And honestly, you probably wouldn’t notice a difference in small body text anyways.

      Reply
      +1
  7. Ljubica Aiko Jul 16, 11:08 am

    Thanks for this great tutorial! Am using icon fonts in my next project and this helped a lot.

    Cheers!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters