Optimize Font Awesome for only used classes

fontello is very good but IcoMoon is even more awesome.

You can now subset icons from Font-awesome for production use. There is now an official subsetting tool called icnfnt, which allows you to pick and package just the icons you need from the current version of Font-awesome (v3.0.2).

The custom download also includes all CSS, LESS, SCSS and SASS code!

I use LESS and not SASS so you might have to adapt your implementation.

Environment:

• Font awesome 4.5.0 (current version)
• Ubuntu 14.04 LTS
• bash

Use this to generate the list of Unicode character numbers that you need:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus" for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done 

You then use this with FontSquirrel in the expert mode where you select custom subsetting: http://www.fontsquirrel.com/tools/webfont-generator

In Unicode ranges enter the comma separated values from above.

Then to remove unnecessary stuff from the CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less 

You'll need to open less/font-awesome/icons.less and paste the output from the grep into the file.

Well, the sass can certainly be jiggled a little to make the selectors % based so they are extendable only. Once this is done, classes can be made to match the wanted icons, and then can @extend the font-awesome classes.

Personally, I do this, and don't actually use the classes in the markup, and just use selectors to the relevant elements and @extend them with these classes.

Example:

// _icons.scss %#{$fa-css-prefix}-glass:before { content: $fa-var-glass; } ... // _core.scss %#{$fa-css-prefix} { ... } 

Then in your scss

a.search { @extend %fa; @extend %fa-search; } 

Et voila.

Fontastic worked for me (it was listed on Font Awesome github page). Select glyphs that you need and download them as a new custom font. Excellent tool.

Iconmoon worked for me. I used it by importing the svg file from font-awesome thus ensuring I get the icons I want and not just the ones available on their site. Also this link helped me with the integration of the new icons https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/

All the other optimization tools here are browser-based. If you're looking for something that can be easily automated and run locally, fontite might be the best option.

You'd list the icons you're using in the TOML config file. It will create the CSS with just those classes, as well as packing only those icons into your final font file. You can even combine icons from Font Awesome Brands, Font Awesome Solid, etc. into the same CSS and font files.

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 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.