Use IcoMoon to reduce 98% FontAwesome load size
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">
1Use HTML tag to inject your icon:
<i class="fas fa-home"></i>
1
IcoMoon Approach
Visit IcoMoon and select the icons you need, then click
Generate Font
Download the assets
Copy
style.css
andfonts
folder 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.
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!