You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

A smarter way to deal with icons: Font Icons

0.00 avg. rating (0% score) - 0 votes
While working on the User Interface of a website, we, the Frontend Engineers @naukri are always focused on the performance of a web page. There are many factors which affect the same, and one of them is the usage of icons and images.
Few decades back, all icons were used as individual images, leading to multiple server requests for each icon/image, which considerably affected the performance of a website.
Then came image ‘sprites’ into picture. An image sprite is a collection of icons put into a single image. It automatically reduces the number of server requests, hence saving the bandwidth. But there are certain limitations of using a sprite as well, such as:
  • Maintenance. If one needs to change the size of an existing icon in a sprite, it will require moving rest of the icons from their original place and thus CSS of all icons need to be modified.
  • Sometimes, we are restricted to the original image dimensions. If we need to stretch the element, resizing the icon is almost impossible. It will get distorted.
  • Changing color of the existing icons is impossible.
Recently, we came across a whole new concept of font icons. These are just fonts. However, instead of containing alphabets or numbers, they contain symbols or icons. We can style them with CSS in the same way as we style text. Just like image sprites multiple font icons can be kept in a single font-icon file. A font file is vector based, so it’s entirely scalable.

Why are we using font-icons?

Most of the limitations of image sprites are handled by font-icons:
  • Maintaining font-icon file is easy.
  • We can resize the original icon to any extent without losing its clarity, it will remain perfectly crisp and sharp at any resolution.
  • We can also change the color of any icon just like changing its textual color.
There are two ways through which we can generate font icons:
  1. Manually through Font Forge.
  2. Grunt using Node Engine.

How to create our own font icons?

  1. There are many websites which provide us various icon fonts free of cost. We can also upload our icons there and get generated font file with few simple steps.
Some of the websites providing this feature are: https://icomoon.io/, www.flaticon.com/, www.fontello.com/ and many more…
  1. We can also generate our own icons using “Font Forge Tool”.
It has 3 simple steps to follow:
  • By clicking on any of the square blocks which appears on the initial screen, will come a option of importing the SVG of icon in Font Forge software:
  • It will thus assign that square block to imported icon.
  • Last step is to generate font file after having imported all the icons. For this, select generate font’s option, generate TTF file format from there. Other file formats like EOT, WOFF can be generated from http://www.fontsquirrel.com/ using the generated TTF file.

File Formats of Font Icons

There are various file formats for font icons. These are browser specific, i.e. different browsers use different file formats.
The main types are:
  • TTF
  • EOT
  • WOFF
  • SVG

Browser Support of file formats of Icon Font

CSS to include icon fonts

Grunt Font Icons

The next step that FED team has taken is to take font icons to a next level by incorporating grunt process for font icons generation. Now, we only have to run a grunt command to convert SVGs (Scalable Vector Graphics) into font icons. That’s all!
Let’s proceed with the installation and configurations:
Installation:
Below are the configurations that are being used in Grunt Module:

Usage:

After generating font icons through grunt, you need to take following steps to use them:
  • Include SCSS partial generated in “sass/partials/_NaukriPartials.scss” folder in your common SCSS file.
  • Compile SCSS files and generate CSS files.

HTML:

HTML format will remain same, whether generating icons through Font Forge Tool or through Grunt.
<i class=”nIc nIc_name”></i>
nIc: Common class for font icon styling. It will include font family.
nIc_name: Your font icon. “Name” of the class will be same as your icon name prefixed with “nl_”

Browser support:

  • Chrome
  • Firefox
  • IE 7 and above
What are the limitations?
Although font icons are very useful, they have certain limitations too.
  • Complex icons cannot have a font icon format.
  • These are monochrome, thus only single colored icons can be generated as font icons.
  • They also have cross domain issues. However, it can be resolved.
Posted in General