web-dev-qa-db-ja.com

フォントのアイコンを静的に回転させる

フォントの素晴らしいアイコンを静的に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に置き換えると機能しません。これは、彼らが実際に勝手に回転できないことを意味しますか？

cssrotationfont-awesome
82
user592419

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

195
KittMedia

他の誰かがこの質問に出くわして、ここでそれを望んでいる場合、私が使用している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);
}
12
PseudoNinja

新しいFont-Awesomev5にはPower Transforms

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

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

フィドル

詳細については、これをチェックしてください： Font-Awesome5 Power Tranforms

10
Noopur Dabhi

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

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

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

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