Using Font Icons

Ok, this topic has been covered quite well on the web, but I thought I’d do a little write up anyway.

We all use images for those groovy little icons.  For example, facebook buttons, ‘X’ for delete, etc…

Well, now that the use of embedded fonts is stable and more widely used, folks have started creating ‘icon’ fonts.  Chris Coyier created us a great demo page to prove why icon fonts are so cool.  He then goes on to write up a great list of available fonts.

Now that’s all more than cool, but what if the icon is the wrong direction?  Here’s what I’ve implemented 🙂


.flip {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}

Snook has a great write up on rotating things.

.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}

Fun stuff!

Leave a Reply

Your email address will not be published.