我想将字体超赞的图标静态旋转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
呢。这是否意味着它们实际上不能任意旋转?
Answers:
在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 v5具有电源变换
您可以通过向图标添加属性data-fa-transform
来旋转任何图标
<i class="fas fa-magic" data-fa-transform="rotate-45"></i>
这是一个小提琴
有关更多信息,请查看:Font-Awesome5 Power Tranforms