[Off topic]Using Font Awesome icons in your applications

By | 10 March, 2015

Since the start of the Internet media and images has been used to decorate and make more meaningful websites. It is very common and helpful to display icons apart from text to catch the users eye and drive them to the actions they want to perform.

When one has to insert an icon in a webpage there are some alternatives. Usually we have been using images in a handful of formats. Commonly PNG, GIF, etc

Despite the fact that they do their job, they also present some drawbacks. For example, these image icons are not scalable in their size and we cannot change their color using CSS rules.

These among others are the main reasons why Font Icons are so cool. There are libraries that contain a range of them. Probably the one with wider collection (open source) is Font Awesome: http://fortawesome.github.io/Font-Awesome/

Using them is really straightforward. For example with this little HTML snippet we are inserting a WhatssApp icon in our page:

Once it is inserted we can play around with it giving different styles with CSS rules in the same way that we do with text. For example, we can increase its size without losing quality by just setting a greater font size or changing the color with the font color property.

So since now you have no excuse if you keep on using that creepy old fashion icons we are used to see across the web…

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather