Статический поворот шрифтов - удивительные значки

Я хотел бы статически поворачивать мои значки шрифта на 45 градусов. На сайте говорится, что:

Чтобы произвольно повернуть и перевернуть значки, используйте классы fa-rotate- * и fa-flip- *.

Однако, делая

<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>

не работает, тогда как замена fa-rotate-45 на fa-rotate-90 делает. Означает ли это, что они фактически не могут вращаться произвольно?

Ответ 1

До FontAwesome 5:

Стандартные декларации содержат только .fa-rotate-90, .fa-rotate-180 и .fa-rotate-270. Однако вы можете легко создать свой собственный:

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

С FontAwesome 5:

Вы можете использовать так называемые "силовые преобразования". Пример:

<i class="fas fa-snowman" data-fa-transform="rotate-90"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-180"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-270"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-30"></i>
<i class="fas fa-snowman" data-fa-transform="rotate--30"></i>

Вам необходимо добавить атрибут data-fa-transform со значением rotate- и желаемым поворотом в градусах.

Источник: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

Ответ 2

В случае, если кто-то другой наткнется на этот вопрос и хочет, чтобы это был SASS mixin, который я использую.

@mixin rotate($deg: 90){
    $sDeg: #{$deg}deg;

    -webkit-transform: rotate($sDeg);
    -moz-transform: rotate($sDeg);
    -ms-transform: rotate($sDeg);
    -o-transform: rotate($sDeg);
    transform: rotate($sDeg);
}

Ответ 3

Новый Font-Awesome v5 имеет Power Transforms

Вы можете повернуть любой значок, добавив атрибут data-fa-transform к значку

<i class="fas fa-magic" data-fa-transform="rotate-45"></i>

Вот скрипка

Для получения дополнительной информации, проверьте это: Font-Awesome5 Power Tranforms

Ответ 4

Если вы хотите повернуть на 45 градусов, вы можете использовать свойство преобразования CSS:

.fa-rotate-45 {
    -ms-transform:rotate(45deg);     /* Internet Explorer 9 */
    -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */
    transform:rotate(45deg);         /* Standard syntax */
}

Ответ 5

Если вы используете Less, вы можете напрямую использовать следующий mixin:

[email protected]{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }