Picture of Daryl Hedley
Icon sets for the Adapt framework
by Daryl Hedley - Friday, 6 December 2013, 1:24 PM


We've been having a few discussions about what we should use for our icons throughout the Adapt framework. For a bit of background - we have icons for items like correct items ('tick'), incorrect items ('cross'), menu button ('three horizontal bars') etc. We originally started with a font-icon set and this worked great. We were able to change the colour of the fonts with ease and in our css files. They're scalable and work across the core browser spec for the framework.

We moved over the png sprites because some graphical artists wanted more control over layered or highly detailed icons. However this has only been done once on a course and we are now using completely flat icons like an icon font set.

I've spoken to a few people involved and we looked at:

* SVG for modern browsers and a fall back to web icon fonts. This would mean keeping two sets of icons.

* SVG for modern browsers and a fall back to png sprites. This would mean keeping two sets of icons.

* Sprites. Would mean we have to keep two sets up to date for retina display devices.

* Use a font icon set. Means it's one set to keep up to date. Is scalable like SVG. We can import a large icon font set and not worry too much about file size like a PNG alternative. There is a few rendering issues with IE8, but I guess a user using IE8 is use to this kind of rendering issue. (blurry edges).

As you can see. I'm slightly towards icon fonts but would welcome any ideas or suggestions to either use or research.



Picture of Tony Finlay
Re: Icon sets for the Adapt framework
by Tony Finlay - Friday, 6 December 2013, 2:06 PM

I do like font icons, and they fall nicely in-line with the current trend towards flatter graphics, though I do have a concern that as trends change there is a possibility they wont fulfil the aesthetic requirements.

I know you mentioned that custom SVGs had only been done once (i'm assuming that this is for adapt courses), but what size of a design audience has had access to design for Adapt to make use of this feature?

My preference is for the SVG-first approach and have the web fonts as a fall-back. I like the fact that if SVGs are embedded in the markup you can change the colours of individual parts of the icon just using CSS, this could be useful for mass theming (e.g. setting a base style for hover states/theme), custom theming which allows for designers to keep up with trends and closely match the theme graphics.

My view of things would be this:

Admins can choose to upload default SVG sets (into Adapt Builder, not necessarily in the MVP version) and users can pick a set that best matches their theme. It also allows for designers to have free reign if they so desire and upload custom SVG sets.

Admins can choose to upload default web fonts sets (into Adapt Builder, again not necessarily in the MVP version) and users can pick a set that best matches their theme.

I hope that makes sense, as a designer there may be some development logistics that get in the way that I'm not aware of, so my apologies if that's the case ;-)

Cheers, Tony



Picture of Daryl Hedley
Re: Icon sets for the Adapt framework
by Daryl Hedley - Friday, 6 December 2013, 3:16 PM

Hey Tony,

Sorry should have been more clear with the bespoke icons. These were bespoke PNG sprites not SVGs. 

We have a lot of courses under our belt in terms of different designs. We've done flat, graphically heavy and some containing 3D looking icons (these were the bespoke PNG sprites I mentioned above). So from working with Adapt and styling/art directing courses myself - a quick and easy way to change icons is best.

So imported SVGs can be bloaty and take a lot of space in the HTML. I do like the fact you can change individual colours - but this is also possible with font stacks (a process of stacking fonts on top of each other with different colours per layer).

One other nice thing about having icon fonts instead of something inline is that if you did want to change it out, you can without affecting the HTML of icons. This is extremely important when dealing with plugins as we don't know how many plugins we might have and leads us to go through all the plugin folders and find all inline SVGs.

Also, if a 'themer' wanted to change the icons, then they have one place to look to do it. Using css classes enables a 'themer' to add custom PNG sprites as well.

I think with icon fonts we have a solution that gives us pretty much everything we need, whilst keeping our http request to a minimum and cross browser compatibility.

I guess something we could do is run a modernizr check for SVG support and instead of loading up the .eot, .ttf or .woff file we load the SVG format first?



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.