Picture of Derek King
Re: Icon sets for the Adapt framework
by Derek King - Sunday, 8 December 2013, 3:41 PM

I tend to agree with you Daryl. As long as you are only ever going to use flat monochrome icons, and that is at least for now the most contemporary look anyway, using fonts is by far the best way to go. As you said, you can change the colour scheme easily with CSS, and add emboss or drop shadow effects if you like. For maximum compatibility you should generate your web-fonts in four formats, .ttf to .eot, .svg, .woff, but you can do this easily using online services such as http://www.font-face-generator.com/.

This is the strategy used by the excellent Bootstrap UI framework, and by GitHub.

There is one small downside: If the user chooses to override the website's font settings with their own preferences, as they can do in Firefox for instance, it breaks the icons which show as unprintable characters (or the equivalent character in their font).

Hope that helps,


P.S. seems I'm a bit behind the discussion! One thing I'd add is that nothing needs to be outside of CSS. Current themes could use the :before selector to add a font based icon, future themes can use sprites or svg's as background images as browser support allows.