SVG icons instead of iconfont

[morriscountynj]

I was wondering about the use of what I’m assuming is FontAwesome for the search icon, menu icon, etc. There’ve been many arguments as of late regarding icon fonts, and actually replacing them with SVG icons or an SVG icon sprite. I personally just switch our custom social media icons from a font to an SVG sprite.

Is this something you’re considering in the future?

[Tom]

Definitely something to consider, except that IE8 doesn’t have support for SVG icons.

However, it’s definitely something for me to look into to see if it would be better performance-wise.

[morriscountynj]

What you do is your use a png as a fallback, this is a good guide

A Complete Guide to SVG Fallbacks

I found a fallback not referenced here when using an SVG sprite. My code looks like

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(sprite.svg);
     background-image: url(sprite.png)\9;
}

The \9 line is read by IE9 and below. I have no idea why it works but it does 🙂 When you look at it in the Dev Tools of IE, IE8 emulated, the svg line is actually crossed out and the png line is what it renders.

🙂

[Tom]

Interesting, and the perk to doing this is better quality icons than using Font Awesome?

[morriscountynj]

Mainly for accessibility reasons, among others, all listed pretty well here: http://blog.cloudfour.com/seriously-dont-use-icon-fonts/

Also the fonts themselves are usually bigger in size than an SVG/SVG sprite, and sometimes people turn off custom webfonts, or they just don’t render at all, leading to useless text on the page 🙂

This came up for me because for fun, I was testing out one of my sites in Opera Mobile, which is a super low-res browser that’s gaining in the developing world (it works on non-smartphones and on slow connections). Webfonts are completely disabled in this browser, so you end up getting an image like

[morriscountynj]

Of course, I love webfonts and it took me forever to change lol, but being a gov person, the better accessibility, the better for me 🙂

[Tom]

Interesting, thanks for all the input.

I’ll definitely put some thought into it 🙂

[morriscountynj]

cool 🙂

[leungwensen]

This project might help if you want to switch from icon fonts to SVG icons with less pain: http://leungwensen.github.io/svg-icon/ It transforms icon fonts collections into SVG icons, supporting almost all the popular icon fonts in github.com, with over 4,000 SVG icons out of the box. You can just select as many icons as you need in the page, and download them as an SVG sprite file. Feel free to leave me an issue if you have any questions using it.

[Tom]

Awesome, thanks! 🙂

[Author]

Posts