FontAwesome 图标仅在鼠标悬停时旋转？答案

【问题标题】：FontAwesome Icons Spin only on mouseover?FontAwesome 图标仅在鼠标悬停时旋转？
【发布时间】：2014-01-09 20:17:43
【问题描述】：

字体真棒我如何使用此代码：<i class="fa fa-spinner fa-spin"></i> 仅在鼠标悬停时工作？

【问题讨论】：

【解决方案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>

小提琴：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;
}

【讨论】：

不幸的是，FA 4.2.0 似乎不再适用。有什么想法吗？
没关系，发现了一个错误：github.com/FortAwesome/Font-Awesome/issues/3885
在 FontAwesome Github 上请求你的课程会很棒;)
从 Font-Awesome 4.2 开始，您必须使用 "fa-" 为动画命名：animation: fa-spin 2s infinite linear;
感谢@AlFoиceѫ，已更新答案以包含此

【解决方案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 链接：https://jquery.com/

【讨论】：

我想知道为什么在我找到你的答案之前没有人建议改变课程。干净的jquery 方法，没有css 源修改。

【解决方案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;
}

【讨论】：

改变它，你必须

【解决方案4】：

只使用字体很棒的 ccs 文件更多细节 http://l-lin.github.io/font-awesome-animation/

他们有关于如何使用 ccs 的详细文档

【讨论】：

【解决方案5】：

在 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;}

然后将其分配给上级元素并准备好

【讨论】：