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?

Solution 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

Solution 2

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

Comments

[Ebbs]

Just a warning to anyone else that wants to use this solution : Firefox renders a "wobbly" spinning icon. I am on version 28.0. Here is a link to the issue at FA's github.

[Kiran RS]

Welcome to stackoverflow, please take a lokk at stackoverflow.com/help/how-to-answer