静态旋转字体-真棒图标

Question

我想静态旋转我的字体图标45度。网站上说：

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

但是,

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

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

Answer 1

新字体Awesome v5具有强大的转换功能

通过向图标添加属性数据fa transform，可以旋转任何图标

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

这里有一把小提琴

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

Answer 2

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

Answer 3

在第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);
}

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