Black Friday Sale! Get up to $40 off GP Premium!Learn more

Reply To: SVG icons instead of iconfont

Home Forums Support SVG icons instead of iconfont Reply To: SVG icons instead of iconfont

#184315
morriscountynj

What you do is your use a png as a fallback, this is a good guide
https://css-tricks.com/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.

🙂