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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

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