FontAwesome Icons Spin only on mouseover?
24,246
Solution 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;
}
Solution 2
You could also use javascript with the jquery library:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
}, function() {
$(this).removeClass('fa-spin');
});
That would make it only spin on hover and reset back to its original position when its over - that being said it can look weird with some of the icons (I've only used it with the cog). For infinite spinning on hover you could just do this:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
});
jquery link: https://jquery.com/
Author by
Vachos
Updated on July 05, 2022Comments
-
Vachos almost 2 years
In font awesome how can i use this code :
<i class="fa fa-spinner fa-spin"></i>
work on mouse over only? -
weeheavy over 9 yearsUnfortunately doesn't seem to work anymore with FA 4.2.0. Any idea?
-
weeheavy over 9 yearsNevermind, found a bug for this: github.com/FortAwesome/Font-Awesome/issues/3885
-
Servuc over 8 yearsIt will be awesome to pull request your class on FontAwesome Github ;)
-
Ahmad Maleki over 7 yearsI was wondering why no one suggested changing class till I found your answer. clean
jquery
approach with nocss
source modification. -
Al Foиce ѫ about 7 yearsSince Font-Awesome 4.2, you have to namespace the animation with "fa-" :
animation: fa-spin 2s infinite linear;
-
Chris Owens about 7 yearsThanks @AlFoиceѫ, have updated the answer to include this
-
Xm7X almost 5 yearsChange that, you must