Статично обертати чудові шрифтові значки

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

Question 5

Якщо ви хочете повернути на 45 градусів, ви можете використовувати властивість перетворення CSS:

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