如何垂直对齐字体真棒图标
我对电池使用font-awesome,但它水平对齐。我需要垂直。我可以得到它。使用如何垂直对齐字体真棒图标
m该
<i class="fa fa-battery-full" aria-hidden="true"></i>
实际结果
.fa.fa-battery-full {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-battery-full" aria-hidden="true"></i>
使用CSS属性transform: rotate(-90deg);
,.fa-battery-full{ transform: rotate(-90deg);}
。
感谢您对这个代码片段,它可以提供即时帮助。通过展示*为什么*这是一个很好的解决方案,对未来的读者会有更好的解决方案,这将为它的教育价值提供一个合适的解释[//大大提高](// meta.stackexchange.com/q/114762)但不完全相同的问题。请编辑您的答案以添加解释,并指出适用的限制和假设。 –
使用CSS旋转图标。
.fa.fa-battery-full { transform: rotate(270deg); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-battery-full" aria-hidden="true"></i>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-battery-full fa-rotate-270" aria-hidden="true"></i>
fa-rotate-90
使用本地字体-真棒类
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
这是最好的,将我删除,因为我忘了他们有这样的东西x) –
可以达到这个2种方式:使用FA类或通过添加一些改造样式的标签或者添加下列其他类样式。
要使用FA类使用类 'FA-旋转-270' 顺时针旋转的图标270度:
<i class="fa fa-battery-full fa-rotate-270"/></i>
上面rotaion支持 '90' '180' 和 '270' 的旋转步只要。
如果你想申请一个转变,而不是(潜在的,你可以进一步定制这种方式),你的代码是这样的:
<i class="fa fa-battery-full" style="transform: rotate(-90deg);" aria-hidden="true"></i>
也请注意,以下是转型如果跨浏览器兼容版本你想确保兼容性。
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
使用jQuery:
$(function(){
$('.fa.fa-battery-full').css({"transform": "rotate("+-90+"deg)"});
});
使用FA-rotate- {}度根据字体真棒 –