Hacker News Reader

Comment by pbhjpbhj | Hacker News Reader

Using a font to provide icons on your website. It appears that the Pictos way is a font-replacement method using js? My first thought is that this should be relatively easy to replicate using http://thenounproject.com (or similar) as the source of the icons.

I like the idea: kind of an extension of sprites to using the font file as the sprite holder; not sure if that's any more efficient though due to the cross-browser issues of webfonts.

View on HN

It's a custom font set, using css @font-face like Typekit, and Google Fonts are for example.

So so just like characters in a font, the icons can use the same text effects like any other text, like size, coloring, gradients, text-shadows and etc, which can save you a lot of time and maybe bandwidth too.

We used Pictos fontset on our RailsRumble app (http://splendidbacon.com) a while back and it was much better and faster experience for me, than building the different icon colors & sizes in Photoshop like usually.

Nope :) There is no JS involved. Its a straight CSS file. Browser detection is done on the server by checking the headers. it's lightning fast :)

The reason I put the question mark there was that I wasn't sure if the example I was looking at was a full demo. I forget now which page - but it was definitely doing something with JS on empty divs - pretty sure it was the display examples on the front page; looking at them with inspect element on FF... although perhaps they just look like empty divs ...

Reply on news.ycombinator.com