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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Sapna Group, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}