Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Foundation Working with Icon Fonts

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Posted by Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

How to optimize Foundation Icon Fonts files size?

I used only 3 of them (and not more in the near future). So I want to reduce files size to increase my page speed.

For what I research on Google, I need to install some font editor to remove unused icon from font files and then remove some unused css manually.

Do Zerb provide some easy way to customize their icon font like Foundation Framework? Or Are there another easy ways to do this?

2 Answers

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

No there isn't that I know. Basically you are doing the same thing as trying to take the letter Z out of helvetica. there is just an svg mapped to that key instead

Now I am curious...how big is the font file? SVG's are pretty light and I can't imagine that font file being more then a few hundred k. With all that is included with foundations I would think there would be better optimizations than trying to edit a font.

Way to think outside of the box though!!

Good luck!

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

Can't find the other ways so I ended up using Fontforge to remove all unused icons. The result is great. SVG file reduced from 148 KB to 3 KB. I also removed unused CSS rule which make it as small as 1 KB. (from 20 KB)

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

very nice! did you happen to measure the load time savings you got?

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

I measured load time by pingdom but the results varied a lot.