静态旋转超赞字体的图标 [英] Statically rotate font-awesome icons
问题描述
我想将字体超赞的图标静态旋转45度。它在网站上说:
I'd like to statically rotate my font-awesome icons by 45 degrees. It says on the site that:
要任意旋转和翻转图标,请使用fa-rotate- *和fa-flip- *类。
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
但是,做
<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>
不起作用,而替换 fa-rotate-45
与 fa-rotate-90
一起使用。
does not work, whereas replacing fa-rotate-45
with fa-rotate-90
does. Does this mean that they in fact cannot rotate arbitrarily?
推荐答案
在FontAwesome 5之前:
标准声明仅包含 .fa-rotate-90
, .fa-rotate-180
和 .fa-rotate-270
。
不过,您可以轻松创建自己的文件:
The standard declarations just contain .fa-rotate-90
, .fa-rotate-180
and .fa-rotate-270
.
However you can easily create your own:
.fa-rotate-45 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
使用FontAwesome 5:
您可以使用所谓的电源变换。示例:
You can use what’s so called "Power Transforms". Example:
<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-
,并且您希望以度为单位旋转。
You need to add the data-fa-transform
attribute with the value of rotate-
and your desired rotation in degrees.
来源: https://fontawesome.com/how-to-use/on-the -web / style / power-transforms
这篇关于静态旋转超赞字体的图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!