FontAwesome Icons Spin only on mouseover?

Question

In font awesome how can i use this code : <i class="fa fa-spinner fa-spin"></i> work on mouse over only?

Answer 1

Instead of overriding the class, you can also just create another one for hover only:

.fa-spin-hover:hover {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}


<i class="fa fa-circle-o-notch fa-spin-hover"></i>
<i class="fa fa-spinner fa-spin-hover"></i>

Fiddle: http://jsfiddle.net/Xw7LH/1/

Note: if using Font-Awesome 4.2+ you may need to namespace the animation with "fa-":

.fa-spin-hover:hover {
  -webkit-animation: fa-spin 2s infinite linear;
  -moz-animation: fa-spin 2s infinite linear;
  -o-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}