Creating Animated Spinners with FontAwesome or Glyphicons

When creating JavaScript-rich applications an indicator is often used to give the user some certainty the page is working behind the scenes. If not present a user may question if the page has stalled or not. An animated GIF known as a spinner (or loader) is a common way to achieve this. An alternative to linking to a specific image is to use a popular font library that you may already be referencing by your application.

FontAwesome

The ability to create spinning icons in built into FontAwesome. Reference the library and create loaders easily:
The fa-spin class is what causes the rotation.

If you desire a different animation speed then you need a little CSS:
FYI: this CSS was constructed by studying the fa-spin class found in the FontAwesome stylesheet. Adjust the milliseconds (i.e., 1000ms) to alter the speed. Higher is slower, lower is faster. The default speed used by FontAwesome is 2000ms.

To use simply replace the fa-spin class with fa-spin-custom class that you have made:

Glyphicons

To use the font-library built into Bootstrap you will need to reference the above CSS as well:

That’s it. See a DEMO.
Enjoy.

Read More

Accessible FontAwesome Image Buttons

FontAwesome is a cool resource to use in web development. As its name suggests it is a font (like webdings/wingdings), except it has images that are actually useful. Some icons include edit, delete, email, save, lock, comment, search, facebook logo, etc. But since it’s a font some may wonder how to use it in an accessible way. Here is an example of an edit button:
Some of the classes being referenced are:
This example places an edit icon on an empty BUTTON tag with the fa fa-edit classes. I have also included CSS to remove the browser styling related to the BUTTON tag. Within the button tag is a SPAN tag with the value of Edit. It, however, is floated off the page and can only be detected by screen readers. The reader should say Edit Button. If CSS is completely disabled the image will not be shown but the text won't be hidden either. You are still left with a button whose purpose is understandable!

Read More