

One div – The single element HTML/CSS icon database - afoketunji
http://one-div.com/

======
orofino
Doesn't this seem like a maintainability nightmare? I can see a small change
in rendering that causes number portions of a website to break in difficult to
diagnose ways.

Clicking any of the HTML/CSS links under any of the icons just doesn't
absolutely nothing for me btw. Running: Chrome 25.0.1364.29 beta

~~~
laumars
I agree about the maintainability issue. I really hate this kind of use of CSS
as it strikes me as abuse of coding standards. It's as if a bunch of
intellegent developers decide to throw all sanity out the window and compare
cock sizes using CSS as their ruler.

Maybe I'm just old school, or maybe years writing native applications and
fixing other peoples kludges has taught me disciplines that many of the
younger web developers missed; but I'm a firm believer of the need to keep the
different paradigms separate:

* HTML: mark up for the content

* CSS: design (though I tend to run 2 CSS files: 1 for layout and one for the motif/colour schemes)

* img (et al): embedded objects such as images (if people really want to use vector graphics, then there's SVG).

It's like how you wouldn't write a game and have the OpenGL wrappers in the
same classes as computer AI; you'd modularise your project sanely. So why does
such logic get thrown out the window when it comes to web development?

------
l-p
It needs a "works for me" button for each glyph so you can crowd-source the
compatibility list.

------
marcloney
Whilst using CSS pseudo elements to generate shapes is useful, I believe it's
ill suited to iconography when the better solution is to use a custom web
font. We've had a lot of success here recently, being able to create cross-
platform, vector icons with minimal problems with maintainability.

~~~
bgarbiak
"Pure CSS" icons have smaller footprint, don't require additional request to
the server, don't interfere with screen readers. Unless you need some more
sophisticated shapes they are the way to go. IMHO.

In these other cases, I'd argue that SVG is better than fonts - but that's a
totally different debate.

~~~
btown
You could always use a data-url SVG in the CSS file for the "best of both
worlds"... and a compiler could make this a pretty painless process... but a
single sprite sheet for your entire site is probably worth the extra request
in most cases, since you could lazily load your icons and speed up your
initial page render, rather than waiting for the CSS to fully load to display
content.

But if you do want to do this, see <http://jsfiddle.net/estelle/SJjJb/>

------
elpool2
Most of these icons look pretty bad if your browser isn't zoomed to 100% (In
Chrome anyway).

------
Void_
Why would anybody want to use this extremely hacky solution instead of
webfonts?

~~~
ygra
Because they can, probably. Little other reason.

Although webfonts tend to render horribly on Chrome, so they're not without
problems either.

------
lvh
Looks like it's down already. Couldn't get a Google Cache link.

~~~
robotrobot
Try hitting reload - I managed to get in after a few attempts

------
sgarbi
Nice Idea!

Not to be picky but on on <http://one-div.com/about/> there is a space
missing. Search for "logos.All"

------
Aardwolf
One small amount of HTML - but a giant amount of CSS.

~~~
emp_
Indeed. I think it might be a good alternative to fonts if it is a CDN hosted,
widespread thing, CSS already cached and all.

------
repler
Why not do these with SVG? This is pretty fucking stupid actually.

~~~
ygra
Because it's not as cool because it's been around for a decade ;-)

Also it would be with fewer rendering problems. Bleeding-edge stuff is
supposed to keep at least 70 % of the population out.

------
denysonique
Bug: Some icons break when browser-zooming.

