Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Optimize Font Awesome for only used classes

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.

like image 344
HP. Avatar asked Mar 11 '13 05:03

HP.


People also ask

How do I optimize Font Awesome?

You can optimize Font Awesome easily by removing the stylesheet and unnecessary icons. It'll make your website faster and it'll results in more traffic especially on mobile devices. And if you use Font Awesome Unicode with the HTML code, you don't need the stylesheet.

What is difference between FA and FAS in Font Awesome?

fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular.

Can I use Font Awesome icons for commercial use?

Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.


1 Answers

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

like image 132
cimmanon Avatar answered Sep 18 '22 02:09

cimmanon