更改 Font Awesome 图标的宽度

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" class 图标解决问题。

来自文档的示例。

<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

Answer 3

一开始我也很担心font awesome的图标大小怎么改，试了很多方法，还加了一些类，单独增加或者减小图标的大小..但没有像预期的那样工作..但后来我发现一些类已经由 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

更改 Font Awesome 图标的宽度

Changing Width of Font Awesome Icons

html

css

font-awesome