如何改变 Font Awesome 图标的方向？

Question

我正在使用font-awesome库来显示解锁图标。

默认情况下，图标方向是向右的，我想将其更改为向左。

<i class="fas fa-unlock-alt"></i>

那么，我有没有办法改变解锁图标的方向呢？

- Ganesh Kaspate

---

fa-flip-horizontal - Thomas

顺便提一下，如果您不使用 font-awesome 并且想要改变方向，可以使用 CSS 和 transform: scaleX(-1)：https://jsfiddle.net/29ctojxb/ - לבני מלכה

Answer 1

您可以按照这里的文档，使用fa-flip-horizontal类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>

<i class="fas fa-unlock-alt"></i>
<i class="fas fa-unlock-alt fa-flip-horizontal"></i> 

- Robby Cornelissen

Answer 2

您可以使用Font Awesome旋转和翻转图标。在您的情况下，您可以尝试这样做：

<i class="fas fa-unlock-alt fa-flip-horizontal"></i>

点击这个链接以获取更多信息：https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

- Ichraf

Answer 3

考虑到JS+SVG版本，您可以使用flip-h来水平翻转图标。

<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

<i class="fas fa-unlock-alt" data-fa-transform="flip-h"></i>

更多详情请参考: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

- Temani Afif