如何将Font Awesome图标旋转180度？以fa-truck图标为例

嘿，这个问题我刚好熟悉！要把向左的fa-truck图标转成向右的，有几个简单又好用的方法，我给你拆解一下：

方法1：用Font Awesome内置的翻转类（最省事） #

Font Awesome本身就提供了专门的翻转类，直接加在图标标签里就行，完全不用写额外CSS。对于水平翻转（刚好把向左的卡车变成向右），用fa-flip-horizontal类：

<i class="fa fa-truck fa-flip-horizontal"></i>

这个类会直接把图标沿垂直轴翻转180度，完美实现你要的向右效果，亲测在Font Awesome 4.x版本（就是你用的fa fa-truck这个版本）里完全生效。

方法2：自定义CSS实现旋转（更灵活） #

如果你需要调整其他角度，或者想自己控制样式，可以写个简单的CSS类来实现旋转：

.rotate-180 {
  transform: rotate(180deg);
}

然后把这个类加到图标上：

<i class="fa fa-truck rotate-180"></i>

这种方法的好处是，你可以把180deg改成任意角度（比如90deg、270deg），适配更多场景。

额外小提示：检查是否有现成的反向图标 #

如果你用的是Font Awesome 5及以上版本，其实有专门的向右卡车图标fas fa-truck-right，不过看你用的是fa fa-truck（4.x版本的类名），这个版本里没有这个图标，所以还是前两个方法更适合你。

内容的提问来源于stack exchange，提问作者Mohd Hasan