Font Awesome – a lightweight iconic font for your website

0
1173

Every website, mobile application or offline media such as posters, banners, business cards, etc. use icons to represent certain elements of the content to make it more attractive.

Design and development of such small icons require a lot of efforts. Scalability and compatibility of those icons are major concerns for the designers. Because of this, designers develop same icons in different formats and sizes to make it usable on different media.

What if you get a lightweight iconic font that can solve all of your problems and save your time?

Yes. Font Awesome is a solution for this.

Before we start talking about Font Awesome, please note that there are several other iconic fonts available and many of them offer the same benefits that Font Awesome offers. This article is mainly about Font Awesome & how to use it and not a comparison with any other font.

Font Awesome is an iconic font. Initially developed for Bootstrap, it is compatible with all platforms and technologies. According to the statistics obtained from BuiltWith.com, more than 15 million websites use Font Awesome.

Benefits of Font Awesome:

  1. Free to use

    Font Awesome is absolutely free for commercial use. You can use these fonts in your e-commerce portals, websites, Android applications, Photoshop & Corel Draw files, and much more without any cost.

  2. Easy and fast integration

    It takes less than a minute to integrate Font Awesome in your website and documents. Please check Font Awesome integration section for more details.

  3. Vector-based icons

    Font Awesome provides scalable vector-based icons which means all the icons have infinite scalability and the quality of the icons remains the same at any size. Hence, these icons can be used in any media.

  4. One font, 675 icons

    It offers 675 different icons. These are all popular icons which are more than enough for your e-commerce website and Android applications. These icons are properly organized and can be searched on their website with the help of keywords, making it easily accessible to the developers.

  5. No need of JavaScript for rendering the font in the website

    Font Awesome is compatible with all web platform and technologies as it is not dependent on the JavaScript. It only requires CSS to render the icons in the web browsers.

  6. Full CSS control

    Most of the normal CSS styling for fonts can be applied to Font Awesome icons. You can change size, color, shadows, animations of these icons using CSS styles.

  7. Works perfectly on retina displays

    As mentioned earlier, Font Awesome gives scalable-vector icons, these icons can be scaled infinitely without causing any problem to the quality. Hence, it works perfectly on retina displays.

Font Awesome integration:

Font Awesome is loved by designer and developers for its easy and fast integration with any media.

Integration with the website:

All you have to do is link Font Awesome CSS file in the HEAD tag of the webpage.
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

With the help of CSS class names, you can add these icons to your website. It follows the following format.
 <i class="fa fa-youtube"></i>  This short code look like this:

Where fa is mandatory and fa-youtube is the class that belongs to Youtube icon. You can also change the font size using fa-lg , fa-2x , fa-3x classes.
Always link latest CSS file from Getting started guide of Font Awesome.

Integration with desktop applications:

  1. Download and install the font from Getting started guide of Font Awesome.
  2. Select the font in your editor.
  3. Go to Font Awesome cheatsheet.
  4. Copy and paste the icon from cheatsheet to your editor.

LEAVE A REPLY

Please enter your comment!
Please enter your name here