首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >静态旋转字体-很棒的图标

静态旋转字体-很棒的图标
EN

Stack Overflow用户
提问于 2014-03-31 01:22:13
回答 6查看 140.7K关注 0票数 98

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

要任意旋转和翻转图标,请使用fa-

-*和fa- flip -*类。

但是,执行以下操作

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

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

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-03-31 01:27:38

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>

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

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

票数 237
EN

Stack Overflow用户

发布于 2016-03-22 22:19:33

以防其他人偶然发现这个问题并想要它,这里是我使用的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);
}
票数 15
EN

Stack Overflow用户

发布于 2018-02-08 15:14:31

新字体-令人惊叹的v5具有Power Transforms

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

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

这是一个fiddle

有关更多信息,请查看以下内容:Font-Awesome5 Power Tranforms

票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22747193

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档