フォンタウソームのアイコンはマウスオーバーでのみスピンですか？

Question

フォントでは、このコードを使用する方法：<i class="fa fa-spinner fa-spin"></i>マウスのみでのみ

Answer 1

クラスを上書きする代わりに、ホバーのみのために別のものを作成することもできます。

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

注：Font-Awesome 4.2以降を使用する場合は、 "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

jQueryライブラリにJavaScriptを使用することもできます。

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

.

それは、それがホバーを回転させ、その上の元の位置に戻り、それがいくつかのアイコンと変わって見えることができると言われることがある（私はCOGでそれを使った）。ホバー上での無限の回転のためだけにこれを行うことができます：

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

.

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

Answer 3

だから私のサイトCSSで仕事をしてくれる

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

.

この

.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

フォントAwesome CCSファイルを使用してください 詳細については http://l-lin.github.io/font-awesome-animation/<

CCSの使い方に関する詳細な文書化

Answer 5

フォントでは5、私は誤ってこれが実行されている新しいSVGライブラリによって行われることを発見しました 私はこれをします：

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

.

その後、優れた要素に割り当てられ、ready