FontAwesome is an awesome font library. With fontawesome, it will be super easy to inject icon into your html page. Although the default method is very simple, it has the drawback of taking too much load by loading full set of icons.

In this article, I’ll share how I reduce the fontawesome library size by using IcoMoon to generate icon library that only has what I need.

FontAwesome Default Usage

1. Include FontAwesome Icon Library:

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">

2. Use HTML tag to inject your icon:

   <i class="fas fa-home"></i>

IcoMoon Approach

1. Visit IcoMoon and select the icons you need, then click Generate Font
   

2. Download the assets
   

3. Copy style.css and fonts folder in the assets to your website directory and include it in the HTML page header (Remove previous fontawesome assets)

4. Mouse over to the icon in demo page, and click “Get Code”
   

5. Copy the code to your webpage where you want to show the icon
   

Congratulations! Now your website doesn’t have to load the complete version of icon library, but only load what you need.

Comparison

Below is the comparison between the change

With IcoMoon

FontAwesome Default

Summary

The size reduced: (132 - 2.4) / 132 = 0.98%, and the overall size dropped from 157KB to 38.7KB，pretty amazing!