There is an interesting plugin that uses a special font called “FontAwesome” and gives you a scalable vector image which can be used as a font. We can even re-size them, add different colors and even give it a CSS drop shadow. In effect, we can apply any CSS property which can be applied for fonts. This plugin could be very handy for retina displays as it uses vector images which would scale correctly on all iOS devices with retina displays. The plugin also works on Internet Explorer 7 and higher and is free for commercial use.
The plugin can be found at http://fortawesome.github.io/Font-Awesome/
An example of using this plugin is available at http://www.sapnagroup.com/demo/font-awesome/
We have also done an example of a basic animation using multiple backgrounds.
Here is an example of this animation using CSS3. This will not work on older browsers like Internet Explorer 9 and lower.
Here is the same example using jQuery animation. This will work on older browsers too.