Icon up your App’s performance

A short easy tutorial for solving icon load time problems.

So you have finished building your site. It looks great! But then you notice something. It takes a short while for the icons to load, less then a split of a second, but it’s still there, for all your users to see. How can you solve this?

In the next few paragraphs we’ll see how you can improve your sites performance and avoid that annoying issue.

There are a few different ways to incorporate icons into your site, from PNG up to SVG, but one of the more dynamic and light weight ways I found, is by using “Icon Fonts”.

To demonstrate this we will use the IcoMoon icon library that offers over 4,000 free icons you may chose from. Beside being a free library, the IcoMoon App lets you download only those icons you will use — and this is where you increase even more your site performance. Instead of downloading a full library of icon fonts, you’re just downloading the ones you need.

So let’s dive straight in

To reach the free icon library of IcoMoon you just need to press the red IcoMoon App button on the top right corner of the site:

next choose the icons you would like to use:

you can use the search field at the top of the page to find the category you need.

Now let’s download our new Icons package by clicking the “Generate Font” button on the bottom right corner of the screen.

Then you can either press download or you can make some modifications in the package before downloading it by using the settings icon to the left of the download option. This is one more place where you can boost up your site performance. If for example you don’t need to support IE8, just uncheck it from the package to make it even smaller.

By downloading the icons package you’ll get a compressed file. Open it and dump it in the “assets” directory of your project.

Now you have the icons you need.

3 steps to incorporate the icons into the code

You can see the icons you’ve downloaded in the “demo.html” file in the downloaded folder.

You may notice that under each icon there’s a code. This code will be the way with which we will incorporate the icons into out code.

Step 1: link the icons style.css to your code.

First link the style.css file from the IcoMoon package into the head of your index.html file.

<link rel="stylesheet" href="./assets/icons/style.css">

Step 2: place the icons in the code

Thereafter, whenever you want to place the icon in your code, just add a class name that you’ll use just for that. In the following example I’ll use a LinkedIn icon for my LinkedIn link:

<a href="" class="linkdinLogo"> </a>

you can also add any HTML element into your code that will only hold the icon and place that element in any other element.

Step 3: generate the icons in your CSS

The last thing to do is to write the next code in your CSS file:

.linkdinLogo:after{
    content: '\eaca';
    font-family: 'icomoon';
    color: #efefef;
    background-color: #f14848;
}

Let’s just review this code:

As you can see, you are using the pseudo-element for the icons.

Instead of giving it an empty content, we will give it the code we found in the “demo.html” file we’ve downloaded from IcoMoon.

We declare the font-family.

then we just choose its color and background-color.

That’s it. You now have beautifully working fast loading icons on you web page.

This tool not only improves your site performance, it’s also the perfect tool whenever you don’t have to use too many icons. In my site, for example, I only needed several social icons and two more for the menu. IcoMoon was just right for that.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.