欢迎 Web Awesome，最大最好的开源 Web 组件库。

调整图标大小

我们为您的项目提供了多种调整图标大小的选项。多到即使是金发姑娘也会满意。

我们将介绍行业标准大小建议的基础知识，以及如何在需要时或文本对齐不是主要问题时如何调整图标大小。

默认情况下，图标继承其父容器的 font-size，使它们可以与您可能与它们一起使用的任何文本匹配。除此之外，Font Awesome 还附带以下大小调整工具。

相对大小

Font Awesome 包含一系列基于 T 恤的大小，这些大小不仅可以增加或减小图标的大小，还可以帮助将图标与周围的文本和元素（例如按钮填充）垂直对齐。这非常适合在保持易读性和与 UI 元素对齐的同时增加/减小图标的大小。

当我的六点闹钟响起时，我需要一杯好咖啡。

<p><i class="fa-solid fa-coffee fa-2xs"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>
<p><i class="fa-solid fa-coffee fa-xs"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>
<p><i class="fa-solid fa-coffee fa-sm"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>
<p><i class="fa-solid fa-coffee"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>
<p><i class="fa-solid fa-coffee fa-lg"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>
<p><i class="fa-solid fa-coffee fa-xl"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>
<p><i class="fa-solid fa-coffee fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java. </p>

与 Font Awesome 的图标一样，相对大小比例是根据现代浏览器默认的 16px font-size 创建的，并在此基础上上下创建步骤。

相对大小类	字体大小	像素等效
`fa-2xs`	0.625em	10px
`fa-xs`	0.75em	12px
`fa-sm`	0.875em	14px
`fa-lg`	1.25em	20px
`fa-xl`	1.5em	24px
`fa-2xl`	2em	32px

字面大小

Font Awesome 还包括一个字面大小比例，可以轻松高效地将图标的大小从 1x 调整到 10x。字面大小对于以更大比例调整图标的大小或在文本对齐不是主要问题的情况下很有用。

<i class="fa-solid fa-camera fa-1x"></i>
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-camera fa-3x"></i>
<i class="fa-solid fa-camera fa-4x"></i>
<i class="fa-solid fa-camera fa-5x"></i>
<i class="fa-solid fa-camera fa-6x"></i>
<i class="fa-solid fa-camera fa-7x"></i>
<i class="fa-solid fa-camera fa-8x"></i>
<i class="fa-solid fa-camera fa-9x"></i>
<i class="fa-solid fa-camera fa-10x"></i>

当文本对齐和调整图标大小对您的设计很重要时，您也有很多选择。

咖啡

“在我看来，强迫那些确实需要咖啡的人在那些显然将咖啡视为某种娱乐活动的人后面排队，这是不人道的。”

<div style="text-align: center;">
  <i class="fa-solid fa-coffee fa-5x"></i>
  <h4 style="margin-top: 0.25em;">Coffee</h4>
  <p>"It is inhumane, in <a href="https://www.washingtonpost.com/archive/lifestyle/magazine/1997/11/09/grounds-for-suspicion/075c7cfe-d5cf-4443-ae42-a95e6e46fed7/">my opinion</a>, to force people who have a genuine medical need for coffee to wait in line behind people who apparently view it as some kind of recreational activity."</p>
</div>

字面大小类	字体大小
`fa-1x`	1em
`fa-2x`	2em
`fa-3x`	3em
`fa-4x`	4em
`fa-5x`	5em
`fa-6x`	6em
`fa-7x`	7em
`fa-8x`	8em
`fa-9x`	9em
`fa-10x`	10em

高级大小定制

如果您使用的是我们的 Sass 或 Less CSS 预处理器选项，您可以通过基于比例的变量和混合来根据自己的喜好调整相对和字面大小比例。