Replacing images and icons with CSS3 web fonts

Categories Development, productivity, Working smart

It’s really hard to create beautiful and clean web interfaces when you have to slice and dice images for every little button, action or highlight. Well, now you can replace them with web-font characters styled with CSS3 – as most browsers have support for them.

Here’s a sample from something I’m working on just to give you a feel:

Image

Wait, there’s more: using styled glyphs instead of images gives you more flexibility with application themes – and less images to mess with:

Image

The nice thing? What you’re actually seeing above is :

<div id="header-toolbox">
     <a href="">c</a> 
     <a href="">U</a> 
     <a href="">S</a>
     <a href="">X</a> 
 </div>

It’s actually dynamically built with JavaScript but you get the idea.

The font that I’m using for the glyphs is Web Symbols, available from http://www.justbenicestudio.com/studio/websymbols/

2 thoughts on “Replacing images and icons with CSS3 web fonts

Leave a Reply

Your email address will not be published. Required fields are marked *