如何垂直对齐font-awesome图标

Question

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

M使用此

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

实际结果

这是预期的结果

Answer 1

使用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 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旋转图标。

＆＃13;

＆＃13;

.fa.fa-battery-full { transform: rotate(270deg); }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>