Html 更改字体图标的宽度

我正在尝试调整图标的缩放比例和宽度。我特别想做一个图标

更宽，但不是更高

---

我不想让它成为

fa-2x

或

fa-3x

。我试着缩放它，使宽度，比如说150%，而高度仍然是100%

使用电子秤非常简单

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

---

此答案仅在您尝试调整列表中的图标时有效。但我之所以发布这篇文章，是因为我猜一些访问此页面的人正处于这种情况

如果你是这样的话，将“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>

滑冰
滑雪
北欧式滑雪
滑雪板
雪犁

文件

---

起初，我还担心如何更改字体图标的大小，我尝试了很多方法，甚至尝试添加了一些单独增加或减少的类 减小图标的大小。。但一切都没有按预期的那样进行。。但后来我发现 一些已经被字体定义的类可以用来处理图标的大小 下面是一些课程的列表

<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

对于字体，你必须使用字体大小来调整is大小字体大小使用固定比例。我正在尝试独立于高度来缩放宽度。也许这会有帮助？字体是一种字体，图标实际上是文本，所以你的问题应该是我可以拉伸文本吗：是的，我希望我不必使用转换，但因为它是一种字体，我想我必须这样做。谢谢，太好了，谢谢。也应该使用跨浏览器前缀吗<代码>-webkit转换：比例（1.5,1）-moz变换：比例（1.5,1）-ms变换：标度（1.5,1）-o变换：标度（1.5,1）；变换：比例（1.5,1）这就像一个符咒。虽然我用它来增加字体的高度，但它还是给了我一个想法。这会扭曲图标。使用字体大小来设置上div/元素对我来说很好。@Amitkumar-是的，当然可以。然而，OP问了

我特别想让图标更宽，但不是更高。

这就是为什么这是问题的正确答案。很好的建议！这应该是正确的答案！