如何垂直對齊字體真棒圖標

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