Статически вращайте иконки с потрясающим шрифтом

Question 1

Я хотел бы статически повернуть свои иконки с потрясающим шрифтом на 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делает. Означает ли это, что они на самом деле не могут вращаться произвольно?

Question 2

Перед 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

Question 3

Если кто-то еще наткнется на этот вопрос и захочет, вот миксин SASS, который я использую.

@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);
}

Question 4

В новом Font-Awesome v5 есть Power Transforms

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

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

Вот скрипка

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

Question 5

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

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

Question 6

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

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }

Question 7

Это отлично работает

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>