Hacker News new | ask | show | jobs
by marcloney 4891 days ago
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.
2 comments
bgarbiak 4891 days ago
"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.

link
btown 4890 days ago
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/

link
josefresco 4891 days ago
How are you loading the custom font?
link
marcloney 4891 days ago
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

link
glenjamin 4891 days ago
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.

link