Значки Fontawesome вращаются только на мыши?

Question

В шрифте Awesome Как я могу использовать этот код: <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>

.

Widdle: 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

Вы также можете использовать JavaScript с библиотекой jQuery:

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

.

Это заставит его только вращаться на колесе и сбросить обратно к исходному положению, когда его закончится - это говорит о том, что он может выглядеть странно с некоторыми из значков (я использовал его только с COG).Для бесконечного вращения на валют вы могли бы просто сделать это:

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

.

jQuery Link: 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

В шрифте 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;}

.

Тогда он назначен превосходным элементом и готовым