如何垂直对齐font-awesome图标

Question

我正在使用font-awesome显示电池图标，但它是水平对齐的。我需要它垂直对齐。请问如何实现。

我正在使用以下代码：

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

实际结果

这是预期结果

- ashish.g

---

使用 Font Awesome 中的 fa-rotate-{degree}。 - Govind Samrow

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：将图标顺时针旋转90度。
• fa-rotate-180：将图标顺时针旋转180度。
• fa-rotate-270：将图标顺时针旋转270度。
• fa-flip-horizontal：将图标水平翻转。
• fa-flip-vertical：将图标垂直翻转。

- rgunning

---

这是最好的一个，我会删除我的，因为我忘记他们有这样的东西 x) - Mr. Alien

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

- Amon Jafarbay

Answer 3

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

- Anup Mishra

---

谢谢您提供这段代码片段，它可能会提供一些即时的帮助。一个适当的解释将大大提高其教育价值，因为它将展示为什么这是一个好的问题解决方案，并使其对未来读者更有用，他们可能有类似但不完全相同的问题。请编辑您的答案以添加解释，并说明适用的限制和假设。 - Toby Speight

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>

- Gerard

Answer 5

使用jQuery：

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

jsfiddle

{{链接1：jsfiddle}}

- amrender singh

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>

- Swapnil Patil