You’re reading all articles tagged 'mobile'

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!


Instagram Hickstagram

  • 22 Oct 2018

    Inktober Day 22. Well, @hicksmade left me with a toughie to follow. Here’s my attempt at Dali taking his pet anteater for a walk. #inktober #inktober2018 #leighandjondoinktober #dali

  • 21 Oct 2018

    Inktober Day 21, another bird (sorry @hicksmade)! This is the Snipe that I watched from the hide at Rusty Common on Friday. Lovely birds with beaks that defy the body they’re attached to. #inktober #inktober2018 #leighandjondoinktober #snipe

  • 21 Oct 2018

    Common Darter Dragonfly

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmade’s marshmallows with more marshmallows 🤪 #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmade’s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ‘pen’. #inktober #inktober2018 #ink #leighandjondoinktober

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