Using Pictos Server for icons.

Using a web font for icons is nothing new, but we’d like to share our experience using Pictos Server on our most recent release (job listing stats).

Share Tweet
Published inCompany News
Featured photo

Pictos Server is simple to use. Sign up, customize the icon set you’d like to use, and serve it up. It’s that easy. With over 600 icons to choose from, you’ll probably be able to find what you need.

Pictos icon samples

We needed only a handful of icons for the listing stats feature. So, our custom Pictos font was fairly lightweight, less than 12 KB.

One of the caveats of using Pictos Server over hosting a custom font file is a limitation in Internet Explorer 9, namely CORS (Cross-Origin Resource Sharing). Drew Wilson, creator of Pictos Server, is fervently working on update. So, this limitation shouldn’t be around much longer.

In the meantime, we created a simple sprite sheet to replace the font in Internet Explorer 9:

Sprite sheet for IE9

Designing in the browser has been touted as one of the biggest advantages for using a web font for icons, and we couldn’t agree more. For example, shortly after launch, we began receiving support concerns about whether emails were being lost from applicants. We can only track when someone clicks the “Apply for this job” button, not if they follow through. So, we tried to make that clear in the interface. But, we knew we had failed by showing an icon of a torn piece of paper with a heading of ‘Clicked “Apply”.’

A clearer representation of what was actually happening was needed, and we landed on a mouse cursor with a title of ‘Clicked “Apply” button.’ The change took only a few minutes using a web font:

Changing the icon in minutes

Not only do these icons look great on the desktop, but they look absolutely lovely on mobile devices and tablets, and especially nice and crisp on devices with retina displays.

We think using a web font for icons is swell. Give them a try if you’re not already.

–Adam Spooner (@adamjspooner), Authentic Jobs’ front-end ace.