I am trying to rotate the font awesome refresh icon on hover.
This is the normal version:
<i class="fa fa-refresh"></i>
And here's the spinning version:
<i class="fa fa-refresh fa-spin"></i>
I want to rotate the icon only on hover.
Here's the failed: fiddle
.fa-spin-hover:hover {
-webkit-animation: spin 2s;
-moz-animation: spin 2s;
-o-animation: spin 2s;
animation: spin 2s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>