Fontawesome5 спиннинг сложен и трансформирован значок не на месте, как исправить? - PullRequest
Новая
       20

Fontawesome5 спиннинг сложен и трансформирован значок не на месте, как исправить?

0 голосов
/ 16 октября 2019

Я пытаюсь сделать "иконку сохранения" с эффектом загрузки. Для этого я сложил fa-save с fa-sync (https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons).

. Чтобы поставить fa-sync в нижнюю правую сторону, я использовал data-fa-transform (* 1009). *

Пока что все работало идеально!

Затем я попытался сделать 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>

Есть ли известная ошибка, назначенная этому? Или, может быть, я делаю что-то не так

(я нашел что-то похожее, но не использую иконки в стеке. Из этого другого вопроса * FontAwesome вращающаяся иконка неуместна )

1 Ответ

0 голосов
/ 17 октября 2019

Кажется, что вы пытаетесь вращать значок синхронизации в середине значка сохранения (дискеты) ... вам нужно отрегулировать верхнюю границу для точного размещения, как показано ниже: 

<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>
...