跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大的开源 Web 组件库。
立即预订！

分层文本和计数器

层是使用 SVG+JS 的力量将图标和文本在视觉上彼此叠加的新方法，它取代了我们的经典图标堆栈。使用这种新方法，您可以使用两个以上的图标。

我们将介绍如何使用自定义 CSS 来实现分层效果的基础知识。

当您不希望页面背景显示时，或者当您确实希望使用多种颜色、叠加多个图标、叠加文本或将计数器叠加到图标上时，分层非常有用。为了使示例清晰，我们在层上添加了背景色，以便您可以看到效果。

Layering

<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fa-solid  fa-times" data-fa-transform="shrink-6"></i>
  </span>


  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-bookmark"></i>
    <i class="fa-inverse fa-solid  fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
  </span>


  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-play" data-fa-transform="rotate--90 grow-4"></i>
    <i class="fa-solid  fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fa-solid  fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fa-solid  fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>


  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>


  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
  </span>


  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</div>

强大变形分层

分层元素工作原理
fa-layers包装您的图标或文本堆栈。您可能还需要包含一个 fa-fw 类，以便您的层对齐。
内部图标在您的 fa-layers 元素中直接添加任意数量的图标。图标按顺序叠加，最后一个图标位于顶部。
fa-layers-text添加到您的 fa-layers 元素中，以将文本置于图标之上。与 data-fa-transform 结合使用，以获得完全控制。
fa-layers-counter将计数器添加到图标的右上角。可以使用 fa-layers-bottom-left、fa-layers-bottom-right、fa-layers-top-left 和默认的 fa-layers-top-right 进行定位。溢出文本将使用省略号进行截断。

自定义

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

CSS 自定义属性详细信息接受的值
--fa-counter-background-color设置 fa-layers-counter 的背景色任何有效的 CSS color 值
--fa-counter-border-radius设置 fa-layers-counter 的边框半径任何有效的 CSS border-radius 值
--fa-counter-line-height设置 fa-layers-counter 的行高任何有效的 CSS line-height 值
--fa-counter-max-width设置 fa-layers-counter 的最大宽度任何有效的 CSS width 值
--fa-counter-min-width设置 fa-layers-counter 的最小宽度任何有效的 CSS width 值
--fa-counter-padding设置 fa-layers-counter 的填充任何有效的 CSS padding 值
--fa-counter-scale设置 fa-layers-counter 放大/缩小的程度任何有效的 CSS transform 缩放 值
--fa-top设置 .fa-layers-top-left 或 layers-top-right 的顶部偏移量任何有效的 CSS top 值
--fa-right设置 .fa-layers-top-right 或 layers-bottom-right 的右侧偏移量任何有效的 CSS right 值
--fa-bottom设置 .fa-layers-bottom-left 或 layers-bottom-right 的底部偏移量任何有效的 CSS bottom 值
--fa-left设置 .fa-layers-top-left 或 layers-bottom-left 的左侧偏移量任何有效的 CSS left 值
--fa-inverse设置反转叠加图标的颜色任何有效的 CSS color 值