10 Jun 2014

Icons fonts over png?Free icon fonts for your next web project.

what is it?

Back in old days whenever we designed a website we sliced up all the psd templates and grabbed the icons and placed them in a separate folder.This is really a time consuming process and also it just decreases the page load speed.If you have noticed , most of the new sites are using icon fonts instead of old school png's or gifs,One of the pouplar and free icon set is the fontawesome it's a free project and it available on github

The perks

 here is why you must use icon fonts
  • first of all icon fonts are much lesser in size than a  regular png .The complete fontawesome package is just 401 kb while a single png can be more than that . 
  • You get better control over the icons. Icon fonts are way more customisable than the regular fonts we can change the color,the shadow,background,and virtually anything that's possible with css
  • Free in all means unlike png's these icons are mostly open source projects so you have lesser copyright issues and hence you can use then in your commercial projects .Even if it's paid you will a get a whole bunch of icons for just the half price.
  • Much,much scalable  icon fonts are mostly like your illustrtor files they can be easily resized to any platform without having the fear of making your icons looked blured out or bulged up.
  • Retina ready  if retina display is going to be the future then these icons are just fine for them.

How to use it?

  there are many icon packages avialable for free download if you wanna checkout them then this github page  has some nice set free icon fonts hosted in github all of them are free.

So here i will just show you how to install fontawesome into your website or app:
  1.  downlod the icon package from the fontawesome homepage http://fortawesome.github.io/Font-Awesome/
  2. link the font awesome css/scss into your site. example
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Once you are done with that , you insert an icon to anywhere like this:
    <i class="fa fa-camera-retro"></i> fa-camera-retro The class name is specific to each icon , in this example we are calling a camera icon with the class " fa fa-camera-retro" . To find out the class name of other icons you can use this link http://fortawesome.github.io/Font-Awesome/icons/
  4. for example if we call that icon we would get an ouput like this : other examples: fa-adjust fa-cog fa-folder-open fa-taxi fa-cutlery fa-bookmark-o fa-coffee fa-check-square-o fa-bolt

That's all hope you can use fontawesome for your next big project. if you wanna learn more about icon fonts you can checkout this link https://github.com/showcases/icon-fonts

Do follow our twitter and Facebook pages to keep updated with all the new posts!


  1. I don't even know how I ended up here, but I thought this post
    was good. I do not know who you are but certainly you are going to a
    famous blogger if you aren't already ;) Cheers!

    Feel free to surf to my web-site: seo ()

  2. Valuable info. Fortunate me I discovered your website by
    chance, and I am stunned why this twist of fate did not took place in advance!
    I bookmarked it.

    Also visit my web site; PriceMode

  3. How to download the icon file?