Pictos Icon Font Server

by enra • 15 years ago

53 20 15 years ago

pbhjpbhj2• 15 years ago

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.

enra• 15 years ago

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.

drewwilson6• 15 years ago

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 :)

pbhjpbhj2• 15 years ago

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

teeny• 15 years ago

It's a cool idea; but why they are using a png sprite for the icons on their own site?

blakeperdue• 15 years ago

Yeah, very strange that they wouldn't want to show off their product by actually using on their site.

drewwilson6• 15 years ago

If you click the "See Examples" button, you can view the font being used. Thanks!!

drewwilson6• 15 years ago

Ya good question :) I built the marketing site before the service was finished. I wanted to launch quickly, so decided to use images instead of the font so I could focus on getting the app finished. Also, I sell the icons as PNGs and vectors, so it's showing customers that as well. Thanks!!

jakozaur• 15 years ago

The client list seems to be impressive, but I haven't seen those icons on any mentioned customer... is it true at all?

drewwilson6• 15 years ago

Yes it's very true. All the customers in that list are people who have purchased my icon sets. Some of them use then in internal tools, some use them for their public website or mobile apps. Thanks!

hhastings• 15 years ago

Pictos & Pictos Font have been around for a while, and my bet is that the vast majority of UX/UI Designers know of Drew Wilson's work. This is an extremely clever solution for an age old problem: As designers, we can now enable our clients to swap out icons to match their updated text/copy content.

cemregr• 15 years ago

Drew is one of the most prolific designer/developers around. I wonder if he ever sleeps. You should check out his other projects too: http://drewwilson.com/

resnamen• 15 years ago

What are the advantages in using a remote service for this vs. hosting them yourself? I'm somewhat averse to taking out additional dependencies on other services if no compelling reason exists.

drewwilson6• 15 years ago

Everything is cached and served very quickly. The main advantage is you can change the icons on the fly at no additional cost. If you update your interface, add new icons or remove some, you can make those changes in that app and you don't even need to grab a new code snippet.

If you want to serve them yourself, that option is there as well. Thanks!!

notatoad• 15 years ago

Am I wrong, or is this a terrible rip off? Anybody who has the need for this should be able to host a single $19 file on their site for minimal cost.

cleverjake• 15 years ago

if you only want two files of the entire set, its better for your bandwidth and the clients speed to have a custom font that only includes those two icons. It is fairly trivial with fontforge, but a lot of people don't have the time and/or ability to do it.

ned• 15 years ago

Interesting service, and very well executed.

The one problem that I have with pictograms-as-fonts is anti-aliasing. The designers that I work with spend hours to make their icons absolutely perfect at every pixel size that they'll be displayed at. This is particularly visible when the icon has horizontal or vertical lines. Most of the time you'll want them have a hard edge, and with anti-aliasing you can never be sure you'll get that result.

This will change in a few years when all our screens have high pixel densities, but for the time being I'm sticking with PNG sprites, with hand-tweeked pixels.

drewwilson6• 15 years ago

You can use this CSS rule to make them look like Photoshop:

-webkit-font-smoothing: antialiased;

only works in webkit, which is most all mobile and chrome/safari.

cheald• 15 years ago

This doesn't seem to work in Chrome on Windows; do you know of any workarounds there? That's not really a small market segment anymore, and I'm not sure I could sell our design team on font icons without a viable solution.

armandososa• 15 years ago

This is a great idea. I already bought Pictos icons and fonts twice (for personal use, and for my day work) and I always thought that it would be nice to be able to have a tool that allow me to use a subset only.

Pictos Icon Font Server

Related Stories