跳至内容
Font Awesome 文档
Web Awesome 闪亮登场，最大最好的开源 Web 组件库。
现在预订！

堆叠图标

您可以轻松地使用 Font Awesome 附带的支持样式堆叠图标。

我们将介绍对齐堆叠图标和单个图标、更改默认字体大小、使用堆叠更改默认字体大小以及简单 CSS 自定义的基本知识。

要堆叠多个图标，请在要堆叠的 2 个图标的父 HTML 元素上使用 fa-stack 类。然后为常规大小的图标添加 fa-stack-1x 类，为较大的图标添加 fa-stack-2x 类。可以将 fa-inverse 添加到具有 fa-stack-1x 的图标，以帮助实现醒目的效果。您甚至可以在父元素上添加更大的图标类，以进一步控制大小。

<span class="fa-stack fa-2x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-camera fa-stack-1x"></i>
  <i class="fa-solid fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
</span>

对齐堆叠图标和普通图标

您可以将堆叠图标与单个图标一起使用。由于堆叠图标的样式由我们框架包含的 CSS 设置，使其大小是单个图标的两倍，因此您需要将堆叠图标缩小或将单个图标放大。

<i class="fa-regular fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="fa-regular fa-circle fa-2x"></i>

使用堆叠更改默认字体大小

当您堆叠图标但更改字体大小时，您需要对 CSS 进行一些调整以保持图标对齐。


<style>
  .fa-stack.small {
    font-size: 0.5em;
  }
  i {
    vertical-align: middle;
  }
</style>
<i class="fa-regular fa-circle"></i>
<span class="fa-stack small">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack small">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="fa-regular fa-circle"></i>

堆叠类

类详细信息
fa-stack用在要堆叠的两个图标的父 HTML 元素上
fa-stack-1x用在堆叠时应以基本大小显示的图标上
fa-stack-2x用在堆叠时应以较大大小显示的图标上
fa-inverse反转堆叠时以基本大小显示的图标的颜色

自定义

我们添加了 CSS 自定义属性，以使自定义更加轻松高效。为以下属性定义您自己的值以 覆盖和自定义 Font Awesome 的默认值。

CSS 自定义属性详细信息接受的值
--fa-stack-z-index设置堆叠图标的 z-index任何有效的 CSS z-index 值
--fa-inverse设置反转堆叠图标的颜色任何有效的 CSS color 值

<span class="fa-stack fa-2x">
  <i class="fab fa-twitter fa-stack-1x fa-inverse" style="--fa-stack-z-index: 2;"></i>
  <i class="fa-solid fa-square fa-stack-2x" style="--fa-stack-z-index: 1;"></i>
</span>
<span class="fa-stack fa-2x" style="--fa-inverse: #1da1f2;">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>