AndroidCSS

Android material design Programming Blog

Free Icon fonts – FontAwesome, google font and ionicons

FontAwesome, google font and ionicons are icon fonts you can use it in your website for free. FontAwesome contains a total of 605+ icons and google material design icon contains a set of 900+ icons.

The beauty of icon fonts is you can change the color and size of icon through CSS property color and font-size respectively.

Advantages of using icon fonts over traditional image icon

  1. You can reduces the number of requests made to the server.
  2. As its size and colors are controlled from CSS so that customization is easy without any loss of quality.
  3. Looks great in smaller devices like mobile, tablet etc.

Disadvantages of icon fonts

  1. Only modern browser supports CSS icon fonts. If you want to target older browsers, then you have to find alternate solution.
  2. To Display a single icon you have to wait for whole font sheet to load. In this case the best practice is creating custom icons that are required by your website.

You can have icon fonts in any tag of your choice like div, anchor, span etc but, if you want to display iconic font in a single row then make sure you are using inline elements like i, span etc.

Font Awesome Icon font

Inside head tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Inside body tag

<i class="fa fa-android" style="font-size:20px;color:#A4C639;"></i>  
<i class="fa fa-clock-o" style="font-size:32px;color:#d34836;"></i>

Output

  

FontAwesome all icons

Google material design icon font

Inside head tag

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Inside body tag

<i class="material-icons">face</i>

google material design icon font all icons

Ionicons icon font

Inside head tag

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

Inside body tag

<i class="ion-social-android"></i>

Ionicons all icons

Finally, the question is which one is best? Is there any advantages of using one over other?. The answer is purely depend on your need and number of icons needed for your website. Choose one which smaller file size and make sure it contains all icons needed by you.

Leave a Reply

Your email address will not be published.

*

About | Policy | Disclaimer

Creative Commons LicenceUp ↑