静态旋转字体真棒图标

在 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：

您可以使用所谓的“Power Transforms”。例子：

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

您需要添加具有 rotate- 值的 data-fa-transform 属性和所需的旋转度数。

来源：https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

---

万一其他人偶然发现了这个问题并想要在这里是我使用的 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);
}

---

新的 Font-Awesome v5 具有 Power Transforms

您可以通过向图标添加属性 data-fa-transform 来旋转任何图标

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

这是一个fiddle

有关详细信息，请查看：Font-Awesome5 Power 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，你可以直接使用下面的 mixin：

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

---

这对我有用

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

---