41–50 of 78 posts
I don't see this as more than a gimmick (a nice one, sure). You end up with mute, non-semantic icon names (single characters) in your CSS, single-color icons only. Vector graphics are nice, but then you might as well go for SVG. The one valid use case for this is limiting the number of roundtrips & requests. But in the long term, there'll be SPDY (or some other similar protocol) for that. And SPDY fixes the problem f…
One nice bonus is that they can get text-shadows and any other styling your normal text could.
This creates more problems than it solves. IE9 will have SVG and SVG support gets better every day.
There is another disadvantage of this approach: many times, icons carry no semantic information at all, just being a design thing. Therefore they are most often (and most correctly) implemented as a background image on a certain HTML element which does carry semantic meaning, like a link or a button. This approach introduces icons within the semantic markup and/or content, unless they're added by some script, which k…
I really don't see that this is a good idea. Icons are by definition graphical, they aren't textual. I can see the draw of having vector icons; but we have other technologies for that. I know people are probably going to tell me an "SVG sprite" isn't possible, but I still maintain that abusing fonts and text like this is a bad idea, even if it does bag you cool CSS3 animations.
Interner Explorer 9 will support SVG. SVG support is getting better every day.
I have been using this method for nearly a year on various projects and theme designs. The font icon method is incredibly useful when you want to give user the flexibility to change up the color of the icons. Plus, as mentioned using CSS pseudo elements with content should not effect modern screen readers. One of the disadvantages mentioned in the article is the file size, but it can be drastically optimized. My favo…
To me this seems like an ugly hack to get around flaws in the HTTP protocol. There was an article on HN yesterday about SPDY ( http://www.chromium.org/spdy/spdy-whitepaper ), a transfer protocol that allows multiple concurrent requests over a single TCP connection. This seems like the proper solution to the primary issue (requesting several small files is slower than requesting one large one). Also, as the design goa…
It's also an ugly hack to get around the fact that making production graphics for every single icon in every single size/color you may need introduces some serious friction to the development process.
They missed one obvious disadvantage - it doesn't work where users force their browser to use a specific font. All I see are letters instead of icons. That said, would it not also make more sense to use codepoints within the "Miscellaneous Symbols And Pictographs" range where possible ( http://unicode.org/charts/PDF/U1F300.pdf ), where you'll find things like volume icons, padlocks, pins, etc. These are missing from…
You're describing a weird place where you want to display a semantic document (the html) using some non-semantic style rules (css, specifically :before and :after) and not others (@font-face) and then interpret the result as a whole semantically. If you want to browser-set font colors, you're going to have a hard time when they match CSS set background colors.
Personally, I'm not particularly fond of the use of :before, etc. either (they should be used for purely decorative purposes - the examples in the article seem to be using them to convey meaning), so what I'm suggesting doesn't really make much sense. :P
Another alternative for pages with simple icons is to use the Data URI scheme: