Fontawesome5 旋转堆叠变形图标错位，如何解决？

Question

我正在尝试制作具有加载效果的 "saving icon"。为此，我将 fa-save 与 fa-sync (https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons) 堆叠在一起。

为了将 fa-sync 放在右下角，我使用了 data-fa-transform (https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)

到目前为止，一切都很完美！

然后，我尝试进行 fa-sync 旋转 (https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)

但是到最后，它并不以自己的圆心为中心旋转。它围绕另一个参考旋转。

<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<span class="fa-stack" style="vertical-align: top;">
    <i class="far fa-save fa-stack-2x"></i>
    <i class="fas fa-sync fa-spin fa-stack-1x" data-fa-transform="right-12 down-12" style="color:darkblue;"></i>
</span>

是否有分配给它的已知错误？或者我做错了什么

（我从另一个问题中找到了类似的东西，但没有使用堆叠图标 *）

Answer 1

看来您是想在保存（软盘）图标中间旋转同步图标...您需要调整 margin-top 以准确放置，如下所示：

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<span class="fa-stack" style="vertical-align: top; ">
    <i class="far fa-save fa-stack-2x"></i>
    <i class="fas fa-sync fa-spin fa-stack-1x" data-fa-transform="right-12 down-12" style="color:darkblue;margin-top:4px"></i>
</span>


<hr/>
<span class="fa-stack-2x" style="vertical-align: top;">
    <i class="far fa-save fa-stack-2x"></i>
    <i class="fas fa-sync fa-spin fa-stack-1x" data-fa-transform="right-12 down-12" style="color:darkred; margin-top:22.5px"></i>
</span>

Fontawesome5 旋转堆叠变形图标错位，如何解决？

Fontawesome5 spinning stacked and transformed icon misplaced, how to fix?

bootstrap-4

font-awesome-5