CSS 静态旋转字体真棒图标

Statically rotate font-awesome icons

提问by user592419

I'd like to statically rotate my font-awesome icons by 45 degrees. It says on the site that:

我想将我的字体真棒图标静态旋转 45 度。它在网站上说：

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

要任意旋转和翻转图标，请使用 fa-rotate-* 和 fa-flip-* 类。

However, doing

然而，做

<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>

does not work, whereas replacing fa-rotate-45with fa-rotate-90does. Does this mean that they in fact cannot rotate arbitrarily?

不起作用，而替换fa-rotate-45为fa-rotate-90确实如此。这是否意味着它们实际上不能任意旋转？

回答by KittMedia

Before FontAwesome 5:

在 FontAwesome 5 之前：

The standard declarations just contain .fa-rotate-90, .fa-rotate-180and .fa-rotate-270. However you can easily create your own:

标准声明只包含.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);
}

With FontAwesome 5:

使用 FontAwesome 5：

You can use what's so called “Power Transforms”. Example:

您可以使用所谓的“电源转换”。例子：

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

You need to add the data-fa-transformattribute with the value of rotate-and your desired rotation in degrees.

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

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

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

回答by PseudoNinja

In case someone else stumbles upon this question and wants it here is the SASS mixin I use.

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

回答by Noopur Dabhi

New Font-Awesome v5has Power Transforms

New Font-Awesome v5具有Power Transforms

You can rotate any icon by adding attribute data-fa-transformto icon

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

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

Here is a fiddle

这是一个小提琴

For more information, check this out : Font-Awesome5 Power Tranforms

有关更多信息，请查看：Font-Awesome5 Power Transforms

回答by Noopur Dabhi

If you want to rotate 45 degrees, you can use the CSS transform property:

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

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

回答by StackHola

If you use Lessyou can directly use the following mixin:

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

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