FontAwesome Icons Spin just on the mouse?

Question

In an awesome font, how can I use this code: <i class="fa fa-spinner fa-spin"></i> only work with the mouse?

Answer 1

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

 .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> 

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

Note: if you are using Font-Awesome 4.2+, you may need to specify the animation space using "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; } 

Answer 2

You can also use javascript with jquery library:

 $('.fa-spinner').hover(function() { $(this).addClass('fa-spin'); }, function() { $(this).removeClass('fa-spin'); }); 

This will make it rotate only when you hover and reset to return to its original position when it ends - if you say that it may look strange with some icons (I used it only with cog). For endless rotation on hovering, you can simply do this:

 $('.fa-spinner').hover(function() { $(this).addClass('fa-spin'); }); 

jquery link: https://jquery.com/

Answer 3

so make it work on my css site change it

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

with this

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

Answer 4

just use the awesome ccs file font More details http://l-lin.imtqy.com/font-awesome-animation/

they have detailed documentation on how to use ccs

Answer 5

In the Awesome 5 font, I accidentally discovered that this is done using the new SVG libraries that it implements, I do this:

 .fa-spin-hover:hover svg { -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;} 

then it is assigned to the parent and is ready