Rotating icon-refresh

Question

I am following this example.

I am still a bit new to CSS3 and not sure what I am doing wrong. I have a simple website using MVC4, with twitter bootstrap and fontawesome. I am trying to get the refresh button animate while I wait for a jQquery post to complete.

I've put the CSS, as specified in the example, in its own file and it is being referenced correctly.

I have tried using the jQuery as both a file and just simply in a script tag on the page.

No matter which conbination I try, I can't get the refresh icon to rotate.

Any ideas what I am doing wrong? Is there any other way to rotate an icon?

Answer 1

if you're using font-awesome, you can add the class fa-spin to your element, it's built in and requires you to add 7 extra characters!! Beats manually writing the css3 animation and toggling the class with javascript.

Just make an element like so,

<i class="fa fa-refresh fa-spin"></i>

and watch that puppy spin.

Refer to fontawesome's spinning docs if you have any concerns

Answer 2

Use this classes of fontAwesome icons: class="icon-refresh icon-spin" Link for fontAwesome icons: fontAwesome icons website