Optimize Font Awesome for only used classes

Question

I am using Font Awesome Sass file https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass to make it _font-awesome.sass so I can @import in my Sass project. I am also using http://middlemanapp.com/ to convert Sass to Css. Questions:

1. Is there a way to bring only used icon classes into my converted .css? Because right now it carried all classes from _font-awesome.sass

2. BONUS: Is it possible to recompile the fonts somehow with used icon classes to make it smaller on production use?

If I can get some tips on #1 above, that would be awesome enough.

Thanks.

Answer 1

Sass has no idea what classes you are actually using. This is something you will have to manually trim down yourself. Open up the provided .scss file and hack out anything you don't need.

Editing the font file itself to eliminate unneeded glyphs requires a 3rd party application to do so and is beyond the scope of this question.

---

Fontello is an online web service that can do all of this for you. It lets you mix and match between multiple icon font collections to create the perfect font file for your project. In addition to the customized font file, it provides multiple .css files containing styles already generated for you (changing the extension to .scss will allow you to import them into your existing Sass project).

Answer 2

fontello is very good but IcoMoon is even more awesome.

Answer 3

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!

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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/

Answer 8

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.

Answer 9

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.