Font Awesome 5 - 动画齿轮，如何排列不同的图标？答案

【问题标题】：Font Awesome 5 - animated cogs, How to arrange different icons?Font Awesome 5 - 动画齿轮，如何排列不同的图标？
【发布时间】：2019-03-10 18:06:56
【问题描述】：

我正在尝试以一种非常特殊的方式排列字体真棒动画齿轮（如下图所示）

我已经创建了一个我似乎能够得到的最接近的小提琴。小提琴在这里https://jsfiddle.net/rke45798/13/

.slow-ani {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

.fa-small {
  font-size: 84px;
}

.fa-med {
  font-size: 70px;
}

.fa-lge {
  font-size: 48px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div class="cogs">
  <i class="fas fa-cog fa-small slow-ani"></i>
  <br>
  <i class="fas fa-cog fa-med slow-ani"></i>
  <i class="fas fa-cog fa-lge slow-ani"></i>
</div>

我在上图中显示的安排是否可以实现？如果有，有什么可以应用的 CSS 技巧吗？

【问题讨论】：

是的。我使用位置：相对；有各种间距，但不能完全正确。

标签： html css font-awesome font-awesome-5

【解决方案1】：

您可以使用 Font Awesome 提供的类来实现这一点。最好考虑使用 SVG 版本来轻松管理。

.slow-ani > * {
  animation-duration:5s;
}

<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" ></script>
<span class="cogs slow-ani">
  <i class="fas fa-cog fa-4x fa-spin" data-fa-transform="down-5  right-5"></i>
  <i class="fas fa-cog fa-3x fa-spin" data-fa-transform="down-17 right-3"></i>
  <i class="fas fa-cog fa-5x fa-spin" data-fa-transform="left-7"></i>
</span>

转换：https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

尺寸：https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

【讨论】：