静态旋转超赞字体的图标


91

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

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

但是,这样做

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

不工作,而更换fa-rotate-45fa-rotate-90呢。这是否意味着它们实际上不能任意旋转?

Answers:


219

在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


匹配Font Awesome的命名约定;真好!
SoEzPz

不要忘记也将图标的显示属性从“内联”更改为“内联块”。该转换不适用于嵌入式元素。此讨论中的更多内容
Oksana Romaniv

15

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


9

如果要旋转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 */
}

3

如果使用Less,则可以直接使用以下mixin:

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

0

这完美地工作

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.