General

Embedding Icons with CSS3

May 13, 2010 • By

Is there no end to CSS3s possibilities? In the past, would you have even considered the idea of generating a font based on an icon set, and then embedding it via @fontface? Or, even better, would you have thought it possible to create icons using only CSS and HTML? I didn't think so…

Ever Thought About Using @Font-face for Icons?

With the advent of font embedding and the realization that fonts are essentially a series of simple vector glyphs. Conceptually, if you placed all required icons for a particular site into a custom font, you would then be able to use those icons anywhere on the site with the option to change the size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text.
Ever Thought About Using @Font-face for Icons?

Font-Embedding Icons: This Is a Big Deal

From P.J. Onori's (resource author) view, it seems like the Font-Embedding Icons are the way forward. So, he generated a font set based on his personal icon set Iconic, and writes further about how to implement the icons and why we should all be using this method for displaying icons.
Font-Embedding Icons: This Is a Big Deal

Pure CSS Icons

As an experiment Zander Martineau built a set of pure CSS Icons, using lots of CSS3, border-radius being the most obvious but also rotation, gradients and transform (for when an icon is hovered over) and all dimensions are em-based so that all you have to do to change the size of the icon is just change the font-size of their containing element.
Pure CSS Icons

By Paul Andrew (Speckyboy and speckyboy@twitter).

(Visited 323 times, 1 visits today)