Nashville Web Design

Web Dev Tool Bag : 3 Icon Font Generators

Apr 02nd   -   Articles, Snippets & Tutorials

Font-based icons are a great way to serve retina quality, scalable, vector icons.  And because they are text, you can style them with CSS in the same way you can style any other text in your page.  Here are a few icon font resources I've been using lately.



Font Awesome is a icon service with 519 Icons.  Just link to a single file to get access to the whole library.  PROS: You can find CDN copies of Font Awesome so there's a good chance your site visitors have already cached the file.  CONS:  You're never going to use all these fonts icons on a single website.  It's a bit of overhead to serve out 1M when you're using just a few icons.





This is my favorite icon service by far. Why do I love it? 1.) You can compile your own custom fonts per project. Now your site visitors are only downloading the fonts/icons you are actually using! 2.) If you can't find the icon you're looking for, simply upload a SVG and Fontastic will add it to the library for you.

Fontastic offers two ways to serve the font: 1.) You can download the font and css files and serve them from your own server, or 2.) you can let Fontastic serve the files for you from their server.  (I like to use this method during development then download the files for production).

PROS: Fontastic lets you fine-tune your icon fonts with customizable libraries and by letting you upload your own icons.  CONS:  The Fontastic servers are not that fast. If you're letting Fontastic host your files, it can slow down the download time for your site. 





Speaking of finding the right icon, when I can't find the icon I'm looking for at Fontastic or Font Awesome, Icon Finder is a great place to look.  Be sure to filter your results to "vector" files so you can download a SVG.


Articles, Snippets & Tutorials

CALL (615) 200-8855