web-dev-qa-db-ja.com

FontAwesomeアイコンはマウスオーバーでのみ回転しますか？

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

iconsfont-awesome
12
Vachos

クラスをオーバーライドする代わりに、ホバー専用に別のクラスを作成することもできます。

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

フィドル： 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;
}
23
Chris

Jqueryライブラリでjavascriptを使用することもできます。

$('.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/

4
Nesiehr

だから私のサイトで動作させる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;
}
0
Vachos

詳細については、font awesome ccsファイルを使用してください http://l-lin.github.io/font-awesome-animation/

ccの使用方法に関する詳細なドキュメントがあります

0
m. oscar

font awesome 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;}

次に、それは上位要素に割り当てられ、準備ができています

0
Dariem Lázaro García López