如何垂直对齐font-awesome图标

Question

我正在使用font-awesome电池，但它是水平对齐的。 我需要它垂直。 我能得到它。

M使用这个

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

实际结果

这是预期的结果

Answer 1

使用文档中的原生font-awesome类

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

您可以实现以下两种方式：使用FA类或向标记添加一些转换样式或添加具有以下样式的另一个类。

要使用FA类，请使用“fa-rotate-270”类将图标顺时针旋转270度：

<i class="fa fa-battery-full fa-rotate-270"/></i>

上述旋转仅支持'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 3

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

Answer 4

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

使用jQuery：

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

的jsfiddle

Answer 6

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