CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
user3436467
user3436467

Reputation: 1775

font awesome spinner in button not working in firefox

I am trying to use a font awesome spinner icon in a button but it doesn't seem to work in the Firefox browser. It does however work in the chrome browser.

Interesting thing is the font awesome spinner seems to work standalone outside the button but not inside the button.

Here is my fiddle for you to test with http://jsfiddle.net/ngLqoqyo/

I am thinking maybe compatible css but unable to find something up to now.

Here is the CSS im applying:

.load-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

Upvotes: 0

Views: 847

Answers (3)

Johnny Kutnowski
Johnny Kutnowski

Reputation: 2390

There is a stray dash in your code.

Also, you don't need different animation names for each browser. You can define the same animation under the same name with the different browser prefixes and reference them in the following way:

.load-animate {
    -webkit-animation: spin .7s infinite linear;
    animation: spin .7s infinite linear;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: rotate(0deg);}
    to { transform: rotate(360deg);}
}

Also, remember to always put prefixed properties before the last, unprefixed version of the property (in this case the order in .load-animate)

Upvotes: 1

Elia Grady
Elia Grady

Reputation: 468

You can also use the -moz-animation property. See updated code here: http://jsfiddle.net/ngLqoqyo/1/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115289

You have a typo which is causing the problem.

.load-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

should be

.load-animate {
    animation: spin .7s infinite linear; /* no starting dash */
    -webkit-animation: spin2 .7s infinite linear;
}

Upvotes: 0

Related Questions