Question

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

Answer 1

在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

Answer 2

如果其他人偶然发现了这个问题而想要它，那么我使用的是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);
}

Answer 3

New Font-Awesome v5 有电源转换

您可以通过将属性data-fa-transform添加到图标

来旋转任何图标

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

这是fiddle

有关详情，请查看：Font-Awesome5 Power Tranforms

Answer 4

如果要旋转45度，可以使用CSS转换属性：

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

Answer 5

如果您使用Less，则可以直接使用以下mixin：

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

Answer 6

这很好用

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

静态旋转字体 - 真棒图标

6 个答案: