Embedding Icons with CSS3
Posted in Other by Design Reviver on the 05-13-2010Is 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).
Responses to “Embedding Icons with CSS3”