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/
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.
Brilliant article. The avenues for web-friendly creativity are bringing us to the age of limitless customization.
Thanks Erik! lol.
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-imageroute, 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
Meanwhile, fonts are relatively heavy unless you use
woff2(still poorly supported), and even then, it's not going to beat GZIP'd
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.
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.
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.
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?
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/
Thanks for the advice and resources! I will definitely take it into consideration.