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
- Weekly Trends
- Python Interview Questions and Answers: Comprehensive Guide
- Scala Exercises, Practice, Solution
- Kotlin Exercises practice with solution
- MongoDB Exercises, Practice, Solution
- SQL Exercises, Practice, Solution - JOINS
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook