Rules

Secret ingredients to quality software

Edit
Info

Do you use the best libraries for icons?

Created on 18 Jun 2014 | Last updated by Tiago Araujo on 25 Nov 2020 09:07 PM (5 months ago)

When building a web application, it is common that you will need icons in the UI. Traditionally, this has been done with images (e.g. png, jpg) which leads to a lot of resource management.

23 06 2014 11 20 02 AM
Figure: Bad example - using images for application icons can generate a lot of pain

This is simplified if you are using Bootstrap , as it comes with a font-based icon library you can use in your web application. However, there is an even better third-party font-based icon library you should use when using Bootstrap: Font Awesome.

Font Awesome provides scalable vector icons that can be customized purely through CSS and some are completely free for commercial projects. This is great if you’re tight on implementation deadlines and need generic icons in a hurry. In the ideal world, a specifically custom-designed icon set is the way to go.

Using it on your project is easy, just use your email and register on their website: Get Started. Then you will be able to download and serve locally or use a CDN.

There are hundreds of icons. Here are a few commonly used ones:

Figure: Examples of Font Awesome icons Read the "Basic Use" documentation.

If you are using Azure , there is an awesome icon collection with several options for you to use: http://code.benco.io/icon-collection/

18 06 2014 2 33 45 PM
Figure: Good example - a 5x scaled paper plane icon added to a Web Application

Also check out Eric Phan's blog for more info: http://ericphan.net/blog/2013/10/15/javascript-corner-font-awesome .

Ben CullBen Cull
Drew RobsonDrew Robson
Adam CoganAdam Cogan

We open source. This page is on GitHub