固定宽度图标

使所有图标具有相同的宽度，以便它们可以轻松地垂直对齐，例如在列表或导航菜单中。

开始之前

在我们开始之前，请确保您已

• 在您的项目中设置 Font Awesome。
• 熟悉添加 Font Awesome 图标的基础知识。

在引用图标的 HTML 元素上添加一个 fa-fw 类，以将一个或多个图标设置为相同的固定宽度。这在图标宽度不同时（例如，一个又高又瘦的图标在一个又宽又矮的图标之上）会导致垂直对齐问题时非常有用。为了在以下示例中保持清晰，我们在图标上添加了背景颜色，以便您可以看到固定宽度，并且还提高了父元素的字体大小。

滑冰

滑雪

越野滑雪

单板滑雪

雪犁

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

设置一致的图标宽度

Font Awesome 图标是在网格上设计的，并具有相同的默认高度。但它们的宽度会根据每个符号的宽度或狭窄程度而有所不同。如果您希望使用宽度一致的图标，添加 fa-fw 将使每个图标都使用相同的宽度渲染。

<!-- setting all icons used in buttons to have the same width using fa-fw -->
<div>
  <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-arrow-left fa-fw" title="Back"></i></span>
  <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-arrow-right fa-fw" title="Forward"></i></span>
  <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-arrows-rotate fa-fw" title="Refresh"></i></span>
  <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-house fa-fw" title="Home"></i></span>
  <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-info fa-fw" title="Info"></i></span>
  <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><i class="fa-solid fa-download fa-fw" title="Download"></i></span>
</div>