Icons as fonts | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Wednesday, 8th February, 2012

Icons as fonts

Design:
The estimated time to read this article is 2 minutes

Two of the biggest changes on the web recently are custom fonts (thanks to font-face) and responsive design.

One of the problems with responsive design are resizable images and by extension icons. When the interface adapts and changes size this can make displaying crisply rendered icons difficult.

Fortunately a few smart people have turned to font-face for the answer. By turning icons into fonts they become styleable with CSS, are infinitely scalable and are a smaller file size than imagery.

If you are interested in adopting this technique there are two options available to you.

You can download and use one of the royalty free font sets out there such as Modern Pictogram or IcoMoon.

pictos icon hosting

Alternatively you can use a hosted service like Pictos. This is similar to Fontdeck and so has an annual fee associated with it.

My preference is to use a royalty free icon set that I can host myself. This will perform better than relying on a third party service.

Either way, I suspect font-face is the future of icons.

Update: As @wez have pointed out on Twitter, this approach is not currently without its problems. In particular the current use of fonts for icons is not accessible. This is a fair comment although not insurmountable. I am sure this will improve over time and as I conclude “I suspect font-face is the future of icons.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.