
Pure CSS GUI icons (experimental) - tswicegood
http://nicolasgallagher.com/pure-css-gui-icons/
======
drdaeman
I don't get why this is "awesome".

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.

~~~
huckfinnaafb
I think it's an interesting experiment to explore CSS3 stuff. Some experiments
end up impractical, but they're still good to know about.

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

~~~
bbatsell
gzip -9 takes the CSS down to 6757 bytes. That's not why it's impractical.

~~~
huckfinnaafb
You're right about gzip/deflate! And of course you don't have to use all the
icons.

So now my argument is probably that of browser compatibility and separation of
jobs :)

~~~
sambeau
Gzipped SVG would be a fraction of that. That should be your new argument :)

------
dualogy
Loving this. Unicode has some awesome symbol dingbats (not just arrows, even
weather symbols, coffee cups and the likes) for UI icons too but this goes a
step further and is more stylish (plus Android fonts don't have most dingbats,
not even the arrows -- not sure about iOS).

------
cemregr
If you're looking for resizable icons that work in non-canvas non-SVG
settings, putting those vectors in a webfont is a pretty good idea too.

Check out: <http://pictos.drewwilson.com/>

~~~
joshuacc
In principle it's a good idea. There is a problem with this particular set,
though. The icons are represented by ordinary characters like "A", which is
confusing for users without webfonts, or on screenreaders. Some of this can be
fixed by remapping the font to more appropriate characters, but you may not
want to go to that much trouble.

~~~
idonthack
i agree.

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.

------
necolas
Yeah, as the opening paragraph of the article says, I did this just as 'an
exercise in creative problem solving and working within constraints. This is
not a "production ready" CSS icon set.'

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.

~~~
uggedal
I use slightly modified versions[1] of the heart and feed icons on
<http://mediaqueri.es>.

[1]: <http://mediaqueri.es/static/icon.css>

------
nnash
Really hate to be, _that guy_ but this was posted almost a year ago and got
~200pts.

<http://news.ycombinator.com/item?id=1921197>

------
dstein
I see no reason why you couldn't use canvas to generate icons as data URI's.
Each icon could then be represented as a set of canvas drawing instructions,
that could be pre-rendered, scaled for different devices/uses, cached, etc. I
think that would be a better long-term solution.

Has anyone built something like this yet?

~~~
DTrejo
SVG?

~~~
dstein
That would be nice if you could embed SVG as background images.

~~~
drdaeman
<http://www.caniuse.com/#feat=svg-css>

IE5.0+ can use VML instead of SVG. Android 2.3 problems could be worked around
with Raphaël.js or some other polyfill.

~~~
dstein
A frankensolution like that would in no way be superior to using canvas.

~~~
drdaeman
IE8 does not support canvas. Raphaël.js is there for a reason, and one of them
is to abstract developers from implementation details and let them just say "I
want this graphics here".

------
crag
Weight is a non issue if you working on intranet sites. Or os applications.

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.

~~~
taitems
Hardly. Having worked on intranet applications I know first-hand how critical
performance is. One on end of the scale you have very small companies, sharing
your apps infrastructure with their timesheeting, invoicing and other app
servers. On the other end you have companies like Shell, with a user base of
over 110,000 employees. All their servers are hosted in the Hague.

------
lyime
Just use Pictos.

