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
Include FontAwesome Icon Library:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
Use HTML tag to inject your icon:
<i class="fas fa-home"></i>
Visit IcoMoon and select the icons you need, then click
Download the assets
fontsfolder in the assets to your website directory and include it in the HTML page header (Remove previous fontawesome assets)
Mouse over to the icon in demo page, and click “Get Code”
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.
Below is the comparison between the change
The size reduced:
(132 - 2.4) / 132 = 0.98%, and the overall size dropped from 157KB to 38.7KB，pretty amazing!