Optimize Font Awesome for only used classes
CssSassFont AwesomeCss Problem Overview
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:
-
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
-
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.
Css Solutions
Solution 1 - Css
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).
Solution 2 - Css
fontello is very good but IcoMoon is even more awesome.
Solution 3 - Css
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!
Solution 4 - Css
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.
Solution 5 - Css
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.
Solution 6 - Css
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.
Solution 7 - Css
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/
Solution 8 - Css
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.