Friday Linkage: Iconfonts, Grunticon and SVG tools

17 Jan 2014

I’ve now completed a few icon projects for clients where the deployment method has been a font. It’s a fairly painful process, but a great way of providing resolution independent graphics to all sorts of browsers, including as far back as IE4. The alternative has been SVG sprites, which work, and allow multiple colours, but to me have been even more of a pain to implement.

Something I hadn’t considered a problem until recently, was font-face support on mobile, which of course iconfonts rely on. Ian Feather (Front End Developer at Lonely Planet) wrote about this in Ten reasons we switched from an icon font to SVG.

The Filament Group have done a lot of work on this, and their research showed that the top 5 browsers without font-face support have a user base that can’t be ignored:

Opera Mini 261 million
Nokia XPress browser 70 million
Blackberry 4 & 5 – stock browser 20 million
Android 2.1 – stock browser 10 million
Windows Phone 7 – 7.8 10-15 million

These user numbers are estimates, but the total number of devices that don’t support font-face is around 370 million. This may or not affect your project – at least one of my clients uses the iconfont within an self-contained application, and it will never be viewed in any browser. Thankfully, the Filament Group also provide two solutions:

Bulletproof Icon Fonts – if you have to use icon fonts, here’s a way to implement them with fallbacks.

Grunticon – takes a folder of SVG/PNG files, and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated. So you can avoid the hassle of working out sprite positions and still get each icon setup with a class name, just as you would with an iconfont tool like IcoMoon. I haven’t had a play with this yet, but it looks very promising indeed!

Finally, a very useful tool if you’re exporting SVG from something like Illustrator, is svgo ui, an easy drag and drop front end to the svgo command tool for optimising file sizes. I find I save on average about 30% on my icon files!

Recent Posts

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

Instagram Hickstagram

  • 19 Sep 2018

    I’m such an egomaniac

  • 14 Sep 2018

    When horses dress up as cows

  • 07 Sep 2018

    Olive’s feeling autumnal

  • 06 Sep 2018

    Going, going …

  • 27 Aug 2018

    Day out MTBing in the Forest of Dean. Bloody knackering climbs and exciting downhills - woohoo!!

  • 23 Aug 2018

    Interesting cloud formations tonight. The whole sky had parallel lines

  • 14 Aug 2018

  • 14 Aug 2018

    Everything’s going to be OK!

  • 14 Aug 2018

  • 12 Aug 2018

    Curry wurst, at last!

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom