CSS for icons is like HTML tables for markup. You have a path, split it to pieces you can represent with CSS using the methods you consider acceptable and draw a shape using ::before and ::after pseudo-elements.
Sure, those icons were carefully hand-crafted. This requires a lot of patient work, and this is admirable.
Yet, we have SVG for vector graphics. Embed it with data: URIs (I believe browsers who support CSS3 transforms can display SVG backgrounds) and that's it.
That said, for anyone wondering why they're not practical...
Spritesheet image - 9kb [http://imgur.com/Mcr9N](png)
CSS needed to write the positions - ~1-3kb
Pure CSS - 60kb
So now my argument is probably that of browser compatibility and separation of jobs :)
<li class="someIcon"><a href="...">label</a></li>
padding: 0 0 0 20px;
background: url(someIcon.png) left center no-repeat;
Check out: http://pictos.drewwilson.com/
any reasonably complete unicode font should already include many of those glyphs. for the glyphs that aren't in the unicode standard, there are private use areas that could accommodate them.
Hopefully it's clear that it's not being presented as something to be used in production or instead of SVG/other more appropriate technologies.
Has anyone built something like this yet?
IE5.0+ can use VML instead of SVG. Android 2.3 problems could be worked around with Raphaël.js or some other polyfill.
And as others have pointed out, you can compress this file down to under 1k.
I like what I see. I'd love to have an icon set that didn't rely on images or "font-face" statements.