Icon Tutorial

Introduction

Form complex web apps to simple one page portfolio website, Icons are ubiquitous. They render much more appeal to users than simple text. Historically, Icons are images. Now, when responsiveness have become a key factor for the success of web apps, as a developer or designer you always look for ways to reduce the number of images loaded. Because more images are loaded, more HTTP requests are sent and latency increase.

Icon Fonts provide us developers / designers a great workaround. These are SVGs, a single file is loaded (thus a single HTTP request) and you can customize the look and feel with CSS.

There are several Icon Fonts are available. We will work with three most popular of them, namely Font Awesome, Bootstrap Glaphycons and Google Material Icons. All of these are super awesome, easy to use and customize as well.

This tutorial is wholly example based. We have embedded the code in JS BIN, so that you can play around with the code. Hopefully you will find these useful and use it for your own projects.

Please share and tweet if you like them so that more and more people can pick up from these ready to use examples and add awesomeness to their projects. If you have suggestions, please write to us. Listening to you is almost religious to us.

Next: Font Awesome Tutorial