1

I guess this should be a common problem, but googling does not give me much on this topic.

We are currently developing a web app. It uses both Font Awesome and Glyphicons since neither of them alone provides the complete set of icons for us. We only use around 25 icons from these 2 fonts, but their font files weigh around 2.5MB, which leaves much room for optimization. We guess we probably should not make our users download 2.5MB of data just for these 25 icons (100KB/icon). At the same time, we probably don't want to ask a design service to custom make those icons for us, since these existing icons are of reasonable quality, and free.

So my question is: is there a way to extract the icons we need from the 2 fonts' files, merge them, and save them as a new font for use in CSS? I imagine leaving out unused icons like this would cut down file size significantly.

Of course, a cheap way is to make a pixel version of each of the icons, then make a sprite with all the pixelized icons in a big PNG, but that would lose many of the nice properties of font icons, which we don't want.

Any input would be appreciated.

Thanks!

lgc_ustc
  • 1,524
  • 2
  • 20
  • 31
  • 1
    font awesome can be used through the CDN here: http://www.bootstrapcdn.com/#fontawesome_tab instead of including the whole font file, you could just load it through there. – wribit Jun 29 '14 at 11:59
  • Yup, you are right. But we still prefer the trimmed down approach though. – lgc_ustc Jun 29 '14 at 12:12

1 Answers1

0

This may help:

Font-Awesome-split_into_individual_SVG-PNG

This project provides a Font-Awesome build split to individual SVG (scalable) and PNG files of different sizes - 16, 22, 24, 32, 48, 64, 128, 256 pixels as well as colors -Black & White.

some suggested to use IcoMoon & Font Custom.

source:

How can I edit Font Awesome (or include my own icons)?

Add custom icons to font awesome

Community
  • 1
  • 1
Ashesh
  • 3,499
  • 1
  • 27
  • 44
  • This sounds promising. I will check the links, and accept this answer if it turns out a working solution. Thanks! – lgc_ustc Jun 29 '14 at 13:50
  • I am accepting this because the links make sense. I haven't implemented the solution though. Implementation might take a bit long and I will come back to it later. – lgc_ustc Jun 29 '14 at 14:11
  • I hope you re post your question if at all you aren't able to achieve the required result.(it should work, IMO) – Ashesh Jun 29 '14 at 15:28