css - 静态旋转 Font Awesome 图标

Question

我想将我的超赞字体图标静态旋转 45 度。它在网站上说:

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

但是，做

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

您可以使用所谓的“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