Your Ultimate Guide to Use of Icon Fonts

What are Icon Fonts?

Icon Fonts are just like fonts.They contain glyphs and symbols. Similarly you style your project fonts, you can style them too. It’s becoming a popular choice on the web and mobile.

Pros and Cons for Icon Fonts

There are some important benefits to using icon fonts instead of raster images in your projects. Here are some of those below:

• You can apply CSS property to them, i.e. color, font-size, padding, margin and many other.

• They are scalable because they are vector graphics. Which means you can maximize and minimize the size without losing their quality.

• You can send single or few HTTP request(s) to load them easily instead of applying multiple HTTP requests for every single bitmap image you might require.

• They are more faster than bitmap images on loading because they are small in size.

• They are supported in all browsers of web (even back to IE6 version).

• They are also using in all cross platform browser based apps.

So, are Icon Fonts Suitable for all Cases?

Of course not. They are a best way to enhance the design of a work project but they have some limitations too. For example, if you have a complex image in your project instead of a simple one color icon, then icon fonts are not a good solution for it.

They are normally limited to a single color, unless you apply any other CSS trick.

Another solution of vector icon it’s worth mentioning: SVG icons. These have the ability to reduce some problems that icon fonts may have, i.e. you can easily apply more than one color to fulfil your design requirements.

Basic introduction of two most popular libraries

• Font Awesome
• Icomoon

Font Awesome Icons

Font Awesome is a big collection of flat icons. Its completely free either for personal or commercial use. Initially, it was designed for Bootstrap, however you can use it in any of your favorite frameworks.

There are two ways to include Font Awesome in your project one is through a Content Delivery Network (CDN). Second is if you are working off-line, you will have to download its icon pack.

Once you have downloaded, you have to find and include the generated fonts folder containing the different font formats and the CSS file. And then, you have to add the CSS file in your HTML document under head area. In last, you have to check and verify that the @font-face src URL paths in your CSS file are correctly going to the appropriate folder. Find all possible ways to set these icons for your projects, see font awesome getting started guide.

In case of using the icons, you have to put them inside either an <i> tag or a <span> tag. Then you have to assign two classes in your desired tag. One is the “fa” class and second class, which should be the icon’s name you want to add, for example fa-home. “fa” is necessary with every icon’s name to show.

Here is the cheat sheet you can see the names of all the icons available in the package.

Icomoon Icons

IcoMoon is another great solution for icon fonts. It has two icon packs, one is open source and other is premium (essential and ultimate options). To know more about these icon packs, click here. Depends on package you select, the number and format of available icons will be different. Just for example, In free pack there is 500 icons, but in premium pack it’s 2000.

IcoMoon App

Except these icon packs, IcoMoon gives you an online app for icon fonts where you can search and download more than 3500 icons for free. This app has some basic editing options and tools. You can import your own designed icons. These icons should be in SVG, PSD and AI format. You can create your own library, generate font and download it. And IcoMoon have some free and paid plans too.

When you download the icons, you have to include CSS file and generated fonts folder that containing different font formats and verify the @font-facesrc paths in your CSS file that linked to the appropriate folder.

There is another option for quick usage link that you can directly add into your HTML file (just like a link to a CDN) and then you are able to use the icons you have selected. But, this option is permanent only for the premium plans. Basic plan offers this option but have limited usage per day.

Same as font awesome icons, in order to use IcoMoon icons you need to place each icon class inside a span element. You have to assign a class and it should be the name of the icon you want to add in span element, i.e. icon-home. You can also change the icon names instead of using the default prefix, you can set your own prefix from the top Preferences option, before download.

Blog Post