Fontawesome 아이콘은 마우스 오버에서만 스핀?

Question

글꼴 굉장한 방법이 코드를 어떻게 사용할 수 있습니까?

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/1//A>

참고 : 글꼴 멋진 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');
});

.

은 호버에서 스핀을 스핀하고 그 위에 오류가 발생할 때 원래 위치로 다시 재설정 할 때 아이콘 중 일부가 이상하게 보일 수 있습니다 (나는 단지 톱니에만 사용).무한한 방적을 위해 호버에서 회전하는 경우 다음을 수행 할 수 있습니다.

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

.

jQuery 링크 : "Nofollow"> 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

글꼴 멋진 CCS 파일을 사용하십시오 자세한 사항은 http://l-lin.github.io/font-awesome-Animation/

CCS 사용 방법에 대한 자세한 문서가 있습니다

Answer 5

글꼴 멋진 5, 실수로 이것은 새로운 SVG 라이브러리가 수행하는 새로운 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;}

.

그런 다음 우수한 요소와 준비

에 할당됩니다.