Font Awesome 5 - 反转图标位置答案

【问题标题】：Font Awesome 5 - Inversion of the icon positionFont Awesome 5 - 反转图标位置
【发布时间】：2026-02-09 13:00:01
【问题描述】：

请问您知道反转图标位置的解决方案吗？

我找到了解决方案，但是我不了解属性。

-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";

我正在寻找一个简单的解决方案......

.fa{
font-size: 23px;
color: blue;
margin-right: 10px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="subtitle-right"><i class="fa fa-phone"></i>+(11)123 456 7890,</div>

【问题讨论】：

你只需要这个transform: scaleX(-1);你可以删除另一个

标签： css font-awesome font-awesome-5

【解决方案1】：

一个简单的解决方案是考虑 Font Awesome (https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms) 已经提供的样式

.fa-phone{
  font-size: 23px;
  color: blue;
  margin-right: 10px;
}

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

<div class="subtitle-right"><i class="fas fa-phone"></i>+(11)123 456 7890,</div>

<div class="subtitle-right"><i class="fas fa-phone" data-fa-transform="flip-h"></i>+(11)123 456 7890,</div>

【讨论】：

【解决方案2】：

如果您要镜像图标，这应该可以正常工作

transform: scaleX(-1);

【讨论】：