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/