Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

FontAwesome: Using CSS with Scalable Vector Icons

DZone's Guide to

FontAwesome: Using CSS with Scalable Vector Icons

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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.
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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}