font-awesomeアイコンを静的に回転

font-awesomeアイコンを静的に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機能します。これは実際には任意に回転できないことを意味しますか？

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

他の誰かがこの質問に遭遇し、ここでそれを望んでいる場合、私が使用する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);
}

新しいFont-Awesome v5にはPower Transformsがあります

アイコンに属性data-fa-transformを追加することで、任意のアイコンを回転できます

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

ここにフィドルがあります

詳細については、こちらをご覧ください。Font-Awesome5Power Tranforms

45度回転する場合は、CSS変換プロパティを使用できます。

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

Lessを使用する場合は、次のミックスインを直接使用できます。

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

これは完璧に機能します

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