#TECH

An Approach for Reusable and Flexible Icons ­-Icon Fonts

Flexible Icons ­-Icon Fonts

At times, you get frustrated while cropping each and every icon form the psd and use it in the application. Sometimes it’s even more! Why? Because when we work on responsive applications we have to rework on the same icons which adds on to unwanted size on icon folder, resulting into issues. It is a lot of struggle. Moreover, the image icons tend to lose their quality when scaled up, which results in degrading of the application performance as it requests http for each icon/image.

Icon fonts are easier to use and gives liberty to style by using CSS. All icons work as fonts and can be used anywhere without worrying about their size and color. Adding on the advantages, these icon fonts become more search engine friendly and very light weight, loads on page just like normal text hence requires just one http request. It is also easy for developers to use font icons just by putting the name of the class like-

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

will result to a folder icon on browser. And that will be felxible to set to any color or size as font like-

.icon-folder{
  font-size : 14px;
  color : green;
}

.icon-folder:hover{
  font-size : 16px;
  color : red;
}

(Using font icons also decrease the dependency to designers everytime for any icon, and to Html developer to place the icons.)

There are many ways to use font icons, some of the ways that I used are:

  1. Font awesome icons
  2. Glyphs icons
  3. Own Custom icons

For Font awesome icon-

-Download folder from fontawesome.com, extract the downloaded folder and put the fonts folder in your root directory with your css folder.

-Add

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

in the head section of your page

-Now by just using the classes of the icon you can use the icons in your application. Like-

<i class="fa fa-filter"></i>

will result to a filter icon on the browser. You can also use your custom classes with font awesome classes to style the icon. Like-

<i class="icon fa fa-filter"></i>

For Glyphs icon-

-Download the bootstrap folder from bootstrap.com, extract downloaded folder and put the bootstrap.min.css file in your css folder and bootstrap.min.js file in your js folder and fonts in the root directory where css folder is present. -Add links in the head section for bootstrap.min.css and bootstrap.min.js.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
>

-Now by just using the classes of the icon you can use the icons in your application. Like-

<i class="glyphicon glyphicon-search"></i>

This will result to a search icon on the browser. So this was all easy and simple ways that my developer fellas can also use.

Now going one step beyond. If we want to create our own icons and want to use them as webfonts. To have such a liberty to use any icon of your choice and make it as font without any limitaions, there is a option of using an online application icomoon.

We can also download it on chrome(as chrome extension) for offline use. To use it from icomoon you need to sign up to icomoon and make a new project.

For for more To learn how to make your own font icons watch video tutorial on youtube and get familier with Icomoon.

You might also like