静态旋转字体真棒图标答案

【问题标题】：Statically rotate font-awesome icons静态旋转字体真棒图标
【发布时间】：2014-05-09 22:38:12
【问题描述】：

我想将字体超赞的图标静态旋转 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 可以。这是否意味着它们实际上不能任意旋转？

【问题讨论】：

标签： css rotation font-awesome

【解决方案1】：

这很好用

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

【讨论】：

【解决方案2】：

New Font-Awesome v5 具有 Power Transforms

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

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

这是fiddle

欲了解更多信息，请查看：Font-Awesome5 Power Tranforms

【讨论】：

【解决方案3】：

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

您需要添加data-fa-transform 属性，其值为rotate- 和您想要的旋转度数。

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

【讨论】：

匹配 Font Awesome 的命名约定；不错！
不要忘记将图标的显示属性从“inline”更改为“inline-block”。转换不适用于内联元素。 More in this discussion

【解决方案4】：

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

【讨论】：

【解决方案5】：

如果你使用Less你可以直接使用下面的mixin：

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

【讨论】：

【解决方案6】：

如果要旋转 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 */
}

【讨论】：