Scalable vector icons using css. Animation using css3 and jQuery

There is an interesting plugin which uses 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 CSS drop shadow. In effect, we can apply any CSS property which can be applied for fonts. This plug in could be very handy for retina displays as it uses vector images which would scale correctly on all IOS devices with retina display. 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 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.
http://www.sapnagroup.com/demo/font-awesome/ex1.html

Here is the same example using jQuery animation. This will work on older browsers too.
http://www.sapnagroup.com/demo/font-awesome/ex2.html

Leave a Reply

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

*


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>