Css – Optimize Font Awesome for only used classes

cssfont-awesomesass

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.

Best Answer

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

Related Topic