Iconssssss! SVG icons or font icons
Will update this post because it’s a work in progress.
SVG
So this blogpost kind up sums up why I want to try SVG icons.
http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
SVG-icons needs background-size… and IE8 doens’t support that, so a fallback to regular PNG’s? Or just screw IE8 and load only those essential icons like logo, menu-burgers. Well IE8 neither supports SVG, so a proper fallback for that already had to be implemented. Damn you IE8. Good thing that GruntIcon and Iconizer take care of those fallbacks, but I haven’t seen it with my own eyes yet.
I tend to lean to SVG because of font-icon do feel hacky when pushing it’s limits.
Do you see limits on these pages?
Slow?
The only thing is that researched that data-uri have a bit of a negative speed / loading impact on mobile-devices. I read a bunch of post, with test results, that noted that SVG background icon where to damn slow. At least when displaying multiple
But does that also counts for tablets? Don’t know have to research that some more.
Generate your own
Moaaaar links
- benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/
- www.pencilscoop.com/2013/11/svg-and-icon-fonts-the-future-of-iconography/
Got time?
- filamentgroup.com/lab/bulletproof_icon_fonts.html
- webdesign.tutsplus.com/articles/making-web-icons-smarter–webdesign-15586
Font-icons
Chris Ferdinandi sums it up pretty well here and he convinced me :)
Do checkout this presentation where Ian Feather links to http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/.
Generate your own
I think I like the IcoMoon app because now the my designer can also create the fonts and those who aren’t using the command line yet ;)
Moaaaar links
- http://pivotallabs.com/generate-icon-fonts-automatically-with-fontcustom/
- http://jaydenseric.com/blog/font-icons-like-a-boss-with-sass-and-font-custom
Conclusion
So I lean to SVG backgrounds… only to have SVG gradients on icons for this specific project… but with few icons like this, they could be load individual. Just 3 damn icons… And then just use font-icons incombination with this .no-web-font on the <html> to provide an alternative text or PNG.
Let’s just go with Web Font for this specific project and experiment with SVG on my new jaimemartinez.nl/en redesign because I do think SVG icons will become the future defaults. And Lonely Planet does look mighty fine!