• Hawke BassignaniHawke Bassignani, almost 5 years ago (edited almost 5 years ago )

    I’m confused… in the end, did you use the icon fonts, or did you use SVG? The title makes me think one thing, but the post says something else…

    … also, if you prefer icon fonts, CSS Tricks dived into this subject for you: https://css-tricks.com/icon-fonts-vs-svg/

    3 points
    • Jesus EnriquezJesus Enriquez, almost 5 years ago

      Thanks for sharing! Someone else showed me this link as well. I ended up turning my SVG icons to fonts. Now I'm finding out that I should have implemented them as SVG's as opposed to converting them. Regardless it still worked for what i was intending to do.

      0 points
  • Erik BjarnasonErik Bjarnason, almost 5 years ago

    Brilliant article. The avenues for web-friendly creativity are bringing us to the age of limitless customization.

    2 points
  • A. M. ­DouglasA. M. ­Douglas, almost 5 years ago (edited almost 5 years ago )

    I'll never be sold on icon fonts. They're just too heavy and unfriendly.

    SVGs you can inline (no HTTP requests) or, if you're going down the background-image route, you can escape the SVG markup and load the SVG via data: URI scheme (no HTTP requests, no inflation typical with base64 data: blobs). Both approaches allow for a spritesheet, with <use...> and background-position: respectively.

    Meanwhile, fonts are relatively heavy unless you use woff2 (still poorly supported), and even then, it's not going to beat GZIP'd image/svg+xml.

    1 point
    • Jesus Enriquez, almost 5 years ago

      Thanks for the advice I'm going to be looking into GZIP'd image/svg+xml. I'm starting to see a pattern with these responses.

      0 points
  • Scott de JongeScott de Jonge, almost 5 years ago

    This isn't an appropriate use of the "Site Design" title. Traditionally this has been used to critique website designs.

    I'm not really sure of the premise of this article, in the end did you use standard SVGs or a generated icon font. For all their vector benefits icon fonts have performance and accessibility issues.

    1 point
    • Jesus Enriquez, almost 5 years ago (edited almost 5 years ago )

      Oh I wasn't sure if this was the right category for my post, but perhaps you can point me in the right direction? The premise of the article was to show people another light weight option to display icons. This was a learning experience for me and the first time I ever blogged so please excuse me if I may have posted this in the wrong forum.

      I figured since the icons were custom design this was appropriate. Also I'm learning new things that I didn't know because of the blog. In the end I actually converted my SVG files into font Icons, but I'm now learning that it might have been a better option just to leave them as SVG's in general.

      0 points
    • Jesus Enriquez, almost 5 years ago

      Also I did design the Jixee site and all the assets are vector base only I had to export them all to png's. I wonder if using SVG's maintains multi color assets and if it's still light weight?

      Do you know if there is some kind of framework that provides the CSS sheet ready if I were to go SVG only? If so can you share that resource with me?

      0 points
      • Scott de JongeScott de Jonge, almost 5 years ago

        It's great that you are blogging and sharing your learning process when it comes to vector asset use on the web. However, you should avoid writing definitive guides to SVG and Icon Fonts if you don't fully communicate the pros and cons of their use.

        Either focus your writing on self reflection (your journey learning web technologies) or write guides on what technologies to use in particular cases. Both have their value to different audiences, mixing the both becomes difficult to follow.

        I think you might want to investigate SVGs further, look at the XML that SVGs are made of in a text editor and refer to the many guides of using SVGs in the web.

        Joni Trythall has written a great guide on SVGs in a web context: http://svgpocketguide.com/

        Sara Soueidan is also a powerhouse when it comes to the use of SVG on the web: https://sarasoueidan.com/tags/svg/

        0 points