How to install only required fonts from Font Awesome?

Question

I would to use a couple of icons from Font Awesome.

I see that we can download the entire font-awesome directory and use simple code like <i class="fa fa-camera-retro"></i> and use fa-camera-retro to display the icons.

Is it possible for me to download only the fonts I will be using?

For the above example if I am using only <i class="fa fa-camera-retro"></i>, fa-camera-retro, I would like to reduce the directory size by only using the files related to this icon.

http://stackoverflow.com/questions/15331525/optimize-font-awesome-for-only-used-classes — Dmytro Sadovnychyi, Apr 28 '14 at 04:54

score 77 · Answer 1 · answered Jan 03 '15 at 18:49

77

Perhaps this helps: fontello

fontello lets you choose your icons and compile your own version

answered Jan 03 '15 at 18:49

Mehrshad Zandigohar

995
6
11

1

Useful but with Font-Awesome run until version 4.7 – mggSoft May 03 '19 at 06:58
This is what I was looking for. The fontawesome file size is reduced from 166KB to 6KB since I am using only 25 icons. – Braj Sep 17 '22 at 16:20

score 37 · Answer 2 · answered Aug 12 '15 at 03:49

37

With Icomoon, you can choose a subset of icons and create your own custom icon font, and it's not just for Font Awesome, they have other libraries.

answered Aug 12 '15 at 03:49

Tomas Ramirez Sarduy

17,294
8
69
85

3

Have missing icons. No React, JavaScript, Node.js for example – Green Mar 15 '17 at 01:59
Works perfectly, nice app. Had a lot of icons and the SVG package I downloaded was intuitive to use and included example code. – Arnold Schrijver Aug 21 '20 at 17:57
1

Exactly what I was looking for. I reduced default fa css size from 27KB to 6KB and woff2 from 65KB to 13KB. If you have `core web vitals` in mind and want to improve your page load speed, then you should look into this. – Robert Feb 09 '22 at 10:39

score 5 · Answer 3 · answered Feb 07 '22 at 11:53

I'd like to propose an alternative solution since there're only a few answers provided here. I faced the same issue and found that the easiest solution was to simply use the svg version. Make sure to provide a height or width dimension though!

<img class="my-fa-icon" src="/assets/css/fontawesome-free-svgs/brands/facebook-f.svg">

.my-fa-icon {
  width: 1rem; /** Required */
}

I know it's not exactly what the question demands, but it's simple & works well.

score 1 · Answer 4 · answered Apr 30 '20 at 04:38

1

You can use Icongram. It helps you to import required icons from various libraries like FontAwesome, Material etc. If you need more customization not sure if it will help you but it can cater to most use cases.

answered Apr 30 '20 at 04:38

Prateek Kumar Dalbehera

2,194
3
24
30

score 0 · Answer 5 · answered Jun 29 '22 at 10:47

I think subset-iconfont meet exactly your needs. The purpose of this package is to subset from several icon font packages and use the latest fontawesome (6.1.1) css/scss styles. To fit your need, you can do it in a few lines:

npm install --save-dev subset-iconfont @fortawesome/fontawesome-free

then


import { FaFreeProvider } from 'subset-iconfont';

const fa = new FaFreeProvider (['plus', 'clock', '500px'], {
  formats: ['ttf', 'woff2'],
});

fa.makeFonts('./outputDir').then((result) => {
  console.log('Done!');
});

Then in folder ./outputDir find the result, open the generated index.html to see how to use it.

Besides, you can also subset from some other iconfont packages and use the subset result in FontAwesome style.

P.S., I'm the author of the package.

How to install only required fonts from Font Awesome?

5 Answers5

Linked