SVG icons instead of iconfont

Home Forums Support SVG icons instead of iconfont

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #184166
    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?

    #184199
    Tom
    Lead Developer
    Lead Developer

    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.

    #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.

    🙂

    #184454
    Tom
    Lead Developer
    Lead Developer

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

    #184478
    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 disabled webfont

    #184479
    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 🙂

    #184554
    Tom
    Lead Developer
    Lead Developer

    Interesting, thanks for all the input.

    I’ll definitely put some thought into it 🙂

    #184647
    morriscountynj

    cool 🙂

    #213045
    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.

    #213080
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.