7

I have an angular project that is built using grunt which uses maybe a dozen icons from font-awesome. Currently, I'm including and thus distributing the entire font-awesome library. Is there a way to "pull-out" only the icons I actually use (preferably as part of the build process)?

I've seen the icomoon app, and that seems to give me the result I want, but it's a manual process to update when icon usage changes.

eflat
  • 919
  • 3
  • 13
  • 34
  • 2
    I have been waiting for an answer to this question. I tried writing a grunt task to do that but couldn't get it to work. I hope there is a solution to that problem cause this is why I stopped using font-awesome and started to rely purely on SVGs – Ahmad Alfy Dec 31 '15 at 23:20
  • 1
    What do you actually win by doing that? – Vaelyr Jan 01 '16 at 00:23
  • I guess eflat wants to reduce the size of the files all users have to download when visiting his website. – Rentrop Jan 01 '16 at 09:01
  • 1
    Possible duplicate of [How to install only required fonts from Font Awesome?](http://stackoverflow.com/questions/23193404/how-to-install-only-required-fonts-from-font-awesome) – LifeQuery Jan 01 '16 at 15:11
  • As in the post referenced by @LifeQuery you could use http://fontello.com/ to choose a subset of fonts from several font libraries and download a zip containing font files and CSS. – beaver Jan 01 '16 at 16:56
  • Yes, right now font-awesome accounts for more than half of my download. Thanks for the leads to fontello, especially as there is a grunt-fontello which may be out of date but hopefully tweakable to fix. It may be a couple days before I can try it out. – eflat Jan 01 '16 at 23:26

1 Answers1

3

First use Font-Awesome-SVG-PNG to get individual SVG files for each Font Awesome icon.

font-awesome-svg-png --color black --sizes 128 --no-png

Then using grunt-webfont, combine the icons of your choosing (from the SVGs generated in the previous step) into a custom webfont.

For example, if you only want to include icons which have angle- keyword in your webfont, then the grunt task would be like -

webfont: {
    icons: {
        src: 'black/svg/angle-*.svg',
        dest: 'build/fonts'
    }
}
Prayag Verma
  • 5,581
  • 3
  • 30
  • 56