我想静态地将我的字体图标旋转45度。它在网站上说:
要任意旋转和翻转图标,请使用fa-
-*和fa- flip -*类。
但是,执行以下操作
<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>
不起作用,而用fa-rotate-90
替换fa-rotate-45
则起作用。这是否意味着它们实际上不能任意旋转?
发布于 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
发布于 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);
}
发布于 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
https://stackoverflow.com/questions/22747193
复制相似问题