如何垂直对齐字体真棒图标

Question

我对电池使用font-awesome，但它水平对齐。我需要垂直。我可以得到它。使用

m该

<i class="fa fa-battery-full" aria-hidden="true"></i> 

实际结果

这是预期的结果

Answer 1

.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>

Answer 2

使用CSS属性transform: rotate(-90deg);，.fa-battery-full{ transform: rotate(-90deg);}。

Answer 3

使用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>

Answer 4

从documentation

<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

Answer 5

可以达到这个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); 

Answer 6

使用jQuery：

$(function(){ 
    $('.fa.fa-battery-full').css({"transform": "rotate("+-90+"deg)"}); 
    }); 

jsfiddle