FontAwesome Iconsマウスオーバーでのみ回転しますか？

Question

素晴らしいフォントではどうすればこのコードを使うことができますか？<i class="fa fa-spinner fa-spin"></i>マウスオーバーでのみ動作しますか？

Answer 1

代わりのクラスをオーバーライドして、この

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

を変更することが私のサイトのCSSで動作させる、あなたはまた、単にだけホバーのための別のものを作成することができます。

を

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

フィドル：​​

注：

.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

ので、私はこの

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

あなたはまた、jQueryライブラリではJavaScriptを使用できます：あなたは「FA-」でアニメーションの名前空間に必要があるかもしれませんフォント-素晴らしい4.2 +を使用している場合

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

をそのホバー上で回転して元の位置に戻すことができます。そのアイコンがいくつかのアイコンで奇妙に見えると言われています（私はコグでしか使用していません）。

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

jqueryのリンク：https://jquery.com/

Answer 4

彼らが使用する方法についての詳細なドキュメントを持って、より詳細 http://l-lin.github.io/font-awesome-animation/

ため ファイルだけフォント素晴らしいCCSを使用ホバー上の無限の回転のために、あなたはこれを行うことができますccs