FontAwesome Icons只能在mouseover上旋轉？

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> 

小提琴：​​

注意：如果使用的字體 - 真棒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

所以使它在我的網站的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 3

你也可以使用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/

Answer 4

只使用字體真棒CCS文件 更多細節 http://l-lin.github.io/font-awesome-animation/

他們如何使用的詳細文檔ccs