Fontawesome中文网

图层、文本和计数器

层是将图标和文本可视化地放置在彼此之上的新方法，取代了我们经典的图标堆栈。 使用这种新方法，您可以使用两个以上的图标。 呸！

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

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

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bookmark"></i>
    <i class="fa-inverse fas 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="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas 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="fas 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="fas 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="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</div>
图层组件工作方式
fa-layers包装你的一堆图标或文本。 您可能还想包含一个fa-fw类，以便您的图层对齐。
Inner icons直接在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定位。 溢出文本用省略号截断。