Optimize Font Awesome for only used classes

css sass font-awesome
HP. picture HP. · Mar 11, 2013 · Viewed 32.4k times · Source

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

cimmanon picture cimmanon · Mar 22, 2013

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 questions

how to alias class name in css or sass

Can I create an alias to a css class? I am using this font-awesome and I am trying to create an alias name for some of the icon classes. So that .icon-globe will also called .globe. How can I accomplish …

Read More
What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More
Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More