Speed up your website performance: Icons as a Fonts

Published in

Hashdog Blog

4 min readFeb 8, 2017

The purpose of this training is related to knowledge and advice on the use of fonts as icons on the web. So let’s start!

@font-face

This simple and hilarious line let us use the fonts as icons in a smart way.

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

Now, I’ll try to create a simple guide for you, for some reason you are here, don’t you?

1. Choosing our SVG icons

We have to think like as an Icon… (how can I…?). Never mind, you just symbolize a square, symmetry, math. Every icon It has to be proportional like 200x200, or whatever. This is very important because when the browser with his interpreted language will render a letter (Icon) with the same size that you assigned then will happen this:

Let’s try to remember that we aren’t working with images! You are working with fonts! Anyway, I bring you some sites where they have a great database of SVG icons:

Flaticon (This is the most used in my perspective)
Iconfinder
freepik

2. Affinity Designer: A perfect bridge between Photoshop and Illustrator

PSD files?. Yes, of course. And what about Ai or SVG files?. You can open and work whit them too!. Yeah, it’s an awesome tool/app that helps you to open AI or PSD files and export them as SVG, JPG, PNG, GIF, TIFF, PSD, PDF and EPS… It works like a charm because it’s really light and doesn’t consume many resources. In other words, you can visit the official site and take a look but the main objective here is be comfortable with the tool to give the right size to the Icons.

3. Icons conversion

Okay, in this step I always use Icomoon App, in my opinion, they bring you a great service and it’s Free!

Just add and select all your set icons, make sure that all is selected.
Then we just generate our font and download the source.

Note: And for the backend lovers, you can automate all with this two tools I think, Fontello and Font blas

4. Implementation

Make sure add the folder fonts and the style.css inside your project.

Finally, you can use all your icons as fonts like this:

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

5. We gain performance!

Now, time to think, let’s say that we going to use 40 icons on my website, ok?. If I make a callback every time for each icon we going to overload the performance of the website. Now, if we put all icons as a font the browser will load just one time the fonts optimizing the performance.

6. Big thing!

Now, let’s said that we deliver the project with their icons 2 months ago. Great! Now our client contacts us to request new icons on his website… Yeah… Maybe, just maybe, I removed all icons from my computer!
Don’t worry and be happy! Icomoon app generates a font.svg like the image:

You just drag this file (SVG) onto icomoon.com/app and all your icons will be rendered again then you can add more icons and repeat the process.
Once dragged inside the app I recommend keep the metrics and metadata of the fonts, you don’t know where you used and if you change this will change the font and may you get some “not found” font in some views from your project.

Example

I used this process to create PerICO the only difference is that hashdog company allow all fonts and style in his server and you can use it on your site adding just one line in <head>

<link href="https://hashdog.io/perico/stylesheets/perico.css" rel="stylesheet">

Conclusion

Every designer/developer has their techniques to this kind of stuff, so please let me know if I can improve something here.

For more articles like this please visit us in our blog and take a look in our brochure company.

Thanks for read!