动画的图标

需要一个加载或状态通信图标来旋转？ 你来对地方了。 我们在支持样式中包含了一些基本动画供您使用。

使用 fa-spin 类让任何图标旋转，并使用 fa-pulse 让它以八步旋转。 这对 fa-spinner 和 spinner 图标类别中的所有内容特别有效。

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

#图标动画+摆动

我们努力让图标在旋转或脉动时完美居中。 然而，我们已经看到一些浏览器和 Font Awesome 的网络字体 + CSS 版本的问题。 通过大量调查，这似乎是一般网络字体的问题，而不是我们可以直接修复的问题。 我们确实有几种方法可以解决这个问题：

#切换框架

切换到 SVG with JavaScript 版本，它为此工作得更好。

#设置动画图标的显示

使用 display: block； 在那里你可以。 这似乎对这个问题有很大帮助。