更改字体真棒图标的宽度答案

【问题标题】：Changing Width of Font Awesome Icons更改字体真棒图标的宽度
【发布时间】：2015-02-17 15:20:50
【问题描述】：

我正在尝试调整图标的缩放比例和宽度。我正在专门尝试制作图标

<i class="fa fa-bars fa-lg"></i>

更宽，但不是更高。

我不想让它成为fa-2x 或fa-3x。我正在尝试缩放它，使宽度为 150%，而高度仍为 100%。

【问题讨论】：

字体真棒你必须使用 font-size 来调整大小
font-size 使用固定缩放。我正在尝试独立于高度来缩放宽度。
也许这会有所帮助？ *.com/a/16447826/107244
Font Awesome 是一种字体，图标实际上是文本，所以你的问题应该是我可以拉伸文本吗：*.com/questions/6351013/css-can-i-stretch-text

标签： html css font-awesome

【解决方案1】：

使用比例真的很容易

.fa { transform: scale(1.5,1); }

【讨论】：

是的，我希望我不必使用转换，但由于它是一种字体，我想我必须这样做。谢谢。
太好了，谢谢。也应该使用跨浏览器前缀？ -webkit-transform: scale(1.5,1); -moz-transform: scale(1.5,1); -ms-transform: scale(1.5,1); -o-transform: scale(1.5,1); transform: scale(1.5,1);
这就像一个魅力。虽然我用它来增加字体真棒图标的高度，但它仍然给了我一个想法。
这会使图标变形。使用字体大小到上 div/元素对我来说很好。
@Amitkumar - 是的，当然会。但是，OP 询问了I'm specifically trying to make the icon wider, but not taller.，这就是为什么这是对所提问题的正确答案。

【解决方案2】：

此答案仅在您尝试调整列表中的图标时有效。但是我发布这个是因为我猜有些访问这个页面的人就是这种情况。

如果你对图标应用“fa-fw”类可以解决问题。

来自文档的示例。

<div style="font-size: 2rem;">
  <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

文档 https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

【讨论】：

【解决方案3】：

一开始我还担心如何改变字体的图标大小，我尝试了很多方法，甚至尝试添加一些单独增加或减小图标的大小..但没有任何效果..但后来我发现一些已经由 font awesome 定义的类可以使用图标的大小。和这是一些类的列表..

<i class="fas fa-home fa-xs">
<i class="fas fa-home fa-sm">
<i class="fas fa-home fa-lg">
<i class="fas fa-home fa-2x">
<i class="fas fa-home fa-3x">
<i class="fas fa-home fa-4x">
<i class="fas fa-home fa-5x">
<i class="fas fa-home fa-6x">

现在享受你的图标 ..goodluck

【讨论】：

好建议！这应该是正确的答案！