4 minutes

How to Use Icon Fonts in Your Website

10 Comments

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.

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.

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.

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website
@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.

Posts by Haris Bacic

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree