
Demo: Pure CSS GUI icons, no images (experimental). - bjonathan
http://nicolasgallagher.com/pure-css-gui-icons/demo/
======
mynameisraj
Now, I realize this is a demo, but aside from that, I really don't think
things like this should be used in a final product.

Why? CSS wasn't made for this. We have SVG for graphics like this. This is a
demo, yes, and it's great to demonstrate the capabilities of CSS for making
small graphics, but in practicality, I don't see the point. The key problem is
graceful degrading- there simply is none here.

Regardless, I love seeing things like this, and he's done a good job. Good
work.

~~~
necolas
I completely agree that it isn't something to be used as a replacement for
sprites or SVG. I tried to make it clear that it's nothing more than a
technical exercise that I hoped to learn from. Hopefully others will pay
attention to that fact and avoid plaguing the web with 'css icons' when there
are better (and easier to use) tools for the job.

~~~
blasdel
You're right, people will just continue to plague the blogosphere with posts
about how they laboriously drew yet another piece of vector art in 'pure' CSS.

------
marknutter
Anyone else getting sick of seeing "you should follow me on Twitter"
everywhere?

~~~
damncabbage
Dustin Curtis may have a lot to answer for.

<http://dustincurtis.com/you_should_follow_me_on_twitter.html>

~~~
gbhn
Yes, _everyone_ uses this formula now. It's annoying.

~~~
GHFigs
"People should stop asking me to follow them now."

------
equark
For monochrome icons, using font-face seems like a better idea than CSS. You
get a ton of icons in one cacheable packet and can easily change the color,
drop-shadow, opacity, etc using standard css.

[http://somerandomdude.com/articles/design-technology/font-
em...](http://somerandomdude.com/articles/design-technology/font-embedding-
icons/)

------
Sephr
The ideal solution (neither SVG or CSS) should be to use appropriate Unicode
characters, of which there are very useful ones added in Unicode 6.0. The very
first icon, "search", can be done with U+1F50D LEFT-POINTING MAGNIFYING GLASS.
Of course most users will not have appropriate fonts installed for
comprehensive Unicode 6.0 coverage, so you should deploy a custom font using
@font-face that suits your site. For example, the search box on my personal
website uses LEFT-POINTING MAGNIFYING GLASS and a custom font I made that
defines a simple magnifying glass much like the one in this demo.

~~~
mike-cardwell
That sounds like a miss-use of fonts to me. Why isn't the ideal solution a
GIF?

~~~
nym
Have you heard of the font "Symbol"?

~~~
Sephr
Do you mean Symbola, a Unicode 6.0 font? And yes, but it has elaborate
characters that only look good at 40px+. I wanted a much more simplistic
style, so I made my own U+1F50D.

Edit: Oh, you meant some unsemantic font.

------
pak
Ugh, too clever for my taste. I would hate to edit icons that are a mish-mash
of CSS backgrounds, rotated boxes, and border-radius'ed edges, and to boot,
based entirely on pseudo-elements. (Current web dev tools like Web Inspector
in Chrome/Safari, etc. aren't well built for examining pseudo-elements.) This
CSS uses ~3-4 pseudo-elements per icon. It's clever for doing that to preserve
the markup and avoiding JS, but it's hard to understand. Maybe it would help
to comment the CSS so designers can see that "this is the handle of the trash
can, this is the left side of the heart," etc., since :after and :before are
hacked far beyond having any semantic meaning.

~~~
necolas
As pseudo-elements, :before and :after don't have any real semantic meaning.
But yes, it is a complete abuse of pseudo-elements that isn't immediately
understandable. There are some more practical and simple pseudo-element hacks
too - [http://nicolasgallagher.com/multiple-backgrounds-and-
borders...](http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-
css2/)

~~~
pak
Eh, some pseudo-elements have semantic meaning. My best example of this would
be :link, which distinguishes between hyperlinks and bare anchors. I would
typically associate :before with styling that happens visually before an
element, and :after the opposite, but they have been both used here to provide
for an icon before the element.

~~~
necolas
:link is a pseudo-class, not a pseudo-element

~~~
pak
I stand corrected!

------
kellysutton
We use a pretty nifty technique that isn't CSS for rendering icons on the
blip.tv HTML5 player. Depending on the context, we use a <canvas> tag to
display either the vectorized or rasterized version of the icon. For the
player itself, not a single image request is required for the thing to draw.
And we don't run into the nasty anti-aliasing stuff you see with small icons
and <canvas>.

~~~
bgrins
Can you explain this a little more?

Do you load the rasterized image using a base64 url, or do you store specific
drawing instructions in JavaScript (lineTo, moveTo, etc)? For the vectorized
icon, do you load SVG inside canvas, or just display SVG directly?

Also, how do you fall back for older browsers that do not support Canvas or
SVG?

------
Maro
What are the pros/cons of using CSS instead of images?

~~~
synnik
Performance -- even if the CSS is the same size as the image, a single CSS
file can return all the icons with a single HTTP request, vs having to make
separate requests for each image.

Even with CSS Sprites, there are two requests - one for the CSS, another for
the sprite image file.

~~~
stan_rogers
Unless you use data: URIs and base64-encode the images, which can result in a
smaller CSS file than "pure" CSS while still eliminating extra HTTP requests.
That depends on the complexity of the image and of the gradient set (or what
have you) that would be needed to replace it. Optimization is always
situational.

~~~
thevivekpandey
Oh great, I once felt the need of it, but did not it actually existed. I feel
though that pure CSS solution would be better, since modifying the colors etc
would be easier with pure CSS.

~~~
philfreo
You can use image sprites and still control the colors using CSS!
[http://www.digital-
web.com/articles/web_standards_creativity...](http://www.digital-
web.com/articles/web_standards_creativity_png/)

------
chrisbroadfoot
Wow, a really nice experiment. I'm surprised you created so many.

------
bryanh
Reminds me of: <http://somerandomdude.com/projects/iconic/>, a set of icons
done in @fontface.

~~~
tbgvi
I also like the Pictos icon set, it has a set done in @font-face (in addition
to standard PNG/vector sets).

<http://pictos.drewwilson.com>

------
samratjp
That's cool. If you're a Raphael js fan, this is even cooler -
<http://raphaeljs.com/icons/>

------
mxavier
It's interesting to see these icons and actually recognize what sites already
use them. For example, I believe OKCupid uses several of these icons in their
GUI such as the report flag, edit, views, etc.

------
lovamova
Here are mine: <http://lucianmarin.com/peculiar/>

------
slowpoison
Great! This is a fun visual test for verifying browser's CSS transform
functions.

------
eiji
Nice! However, "Help" and "Warning" need another iteration ...

------
kang
This has no practical use. This is geeky. I love it!

