改变字体真棒图标的宽度

Question

我正在尝试调整图标的缩放和宽度.我特意试图制作图标

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

更宽,但不高.

我不想做它fa-2x或fa-3x.我正在尝试缩放它以使宽度为150%,而高度仍为100%.

Answer 1

使用秤非常容易

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

Answer 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