Rotating a font awesome icon on hover

Issue

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>

Solution

You need to define the fa-spin keyframe.

CSS:

.fa-spin-hover:hover {
    animation: fa-spin 2s infinite linear;
}
// The animation bellow is taken from font-awesome.css
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transfo rm:rotate(359deg);transform:rotate(359deg)}}

HTML

 <i class="fa fa-refresh fa-2x fa-spin-hover"></i>

Demo: http://jsfiddle.net/uevfyghr/1/

Answered By - Tony Dinh