静态旋转font-awesome图标

Question

我想让我的font-awesome图标做一个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 则有效。这是否意味着它们实际上不能任意旋转？

- user592419

---

使用 text-shadow。参考链接：https://code2real.blogspot.com/2021/03/how-to-make-text-unreadable-using-css.html - Pupil

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

- KittMedia

---

符合 Font Awesome 命名规范，很好！ - SoEzPz

不要忘记将图标的显示属性从“inline”更改为“inline-block”。变换不会在内联元素上起作用。更多讨论。 - Oksana Romaniv

我们可以使用 fa-flip-horizontal 类来实现。参考链接：https://code2real.blogspot.com/2019/03/how-to-flip-font-awesome-icons.html - Pupil

Answer 2

新的 Font-Awesome v5 具有强大的转换功能

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

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

这里有一个代码片段

想要了解更多信息，请参考：Font-Awesome5 动态转换

- Noopur Dabhi

Answer 3

假如有其他人看到这个问题并且需要这个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);
}

- PseudoNinja

Answer 4

如果你想将内容旋转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 */
}

- user1877745

Answer 5

这对我有用

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

- james ace

Answer 6

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

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

- StackHola