Иконки FontAwesome вращаются только при наведении курсора?

В шрифте awesome, как я могу использовать этот код: <i class="fa fa-spinner fa-spin"></i> работает только при наведении курсора мыши?


icons font-awesome
person Vachos    schedule 09.01.2014    source источник

Ответы (5)


arrow_upward
25
arrow_downward

Вместо того, чтобы переопределять класс, вы также можете просто создать еще один только для наведения:

.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;
}
person Chris Owens    schedule 23.05.2014
comment
К сожалению, больше не работает с FA 4.2.0. Есть идеи? - person weeheavy; 16.09.2014
comment
Неважно, нашел ошибку для этого: github.com/FortAwesome/Font-Awesome/issues/ 3885 - person weeheavy; 16.09.2014
comment
Будет здорово отправить запрос вашего класса на FontAwesome Github ;) - person Servuc; 17.01.2016
comment
Начиная с Font-Awesome 4.2, вы должны использовать пространство имен анимации с помощью fa- : animation: fa-spin 2s infinite linear; - person Al Foиce ѫ; 06.04.2017
comment
Спасибо @AlFoиceѫ, обновил ответ, чтобы включить это - person Chris Owens; 06.04.2017

arrow_upward
4
arrow_downward

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

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

person Nesiehr    schedule 19.05.2015
comment
Мне было интересно, почему никто не предложил сменить класс, пока я не нашел ваш ответ. чистый jquery подход без css модификации исходного кода. - person Ahmad Maleki; 29.08.2016

arrow_upward
0
arrow_downward

так что заставьте его работать на моем сайте 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;
}
person Vachos    schedule 12.01.2014
comment
Измените это, вы должны - person Xm7X; 16.08.2019

arrow_upward
0
arrow_downward

просто используйте файл шрифта awesome ccs для более подробной информации http://l-lin.github.io/font-awesome-animation/

у них есть подробная документация о том, как использовать ccs

person m. oscar    schedule 26.05.2016

arrow_upward
0
arrow_downward

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

затем он назначается вышестоящему элементу и готов

person Dariem Lázaro García López    schedule 27.04.2019