One div – The single element HTML/CSS icon database | Hacker News Reader

One div – The single element HTML/CSS icon database

one-div.com

87 pointsafoketunji22 comments

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

Beta bug? I'm on crappy old chrome 18 (android) and it all works.

Scrolling is slow however.

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?

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

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.

How are you loading the custom font?

Chris Coyier has a great blog entry [1] on using and creating custom fonts but Font Squirrel [2] is my tool of choice for generating cross-browser font files and the markup to embed them.

[1] http://css-tricks.com/html-for-icon-font-usage/

[2] http://www.fontsquirrel.com/fontface/generator

I've used the IcoMoon app at http://icomoon.io/ a few times to good effect.

It lets you pick exactly which icons you want, from a variety of sources, and combine them into a single font.

"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.

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/

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

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

Because they can, probably. Little other reason.

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

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

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

Screenshot: http://i.imgur.com/K5X4ryQ.png

Nice Idea!

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

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

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

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

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.

Bug: Some icons break when browser-zooming.

Reply on news.ycombinator.com