I am trying to make a "saving icon" with a loading effect. For that, I stacked a fa-save with a fa-sync (https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons).
In order to put the fa-sync to the bottom-right side, I used data-fa-transform (https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)
So far, everything worked perfect!
Then, I tried to make the fa-sync spins (https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)
But at the end, it does not rotates on its own center. It's rotating around another reference.
<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>Is there a known bug assigned to that? Or maybe I'm doing something wrong
(I found something similar, but not using stacked icons From this other question *FontAwesome spinning icon misplaced)
It seems that you are trying to spin the sync icon in the middle of the save (floppy disk) icon... you need to adjust the margin-top for the exact placement, as shown below:
<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>