Layer, Text, & Counters

Layers are the new way to place icons and text visually on top of each other, replacing our classic icons stacks. With this new approach, you can use more than two icons. Yuss!

Before You Get Started

Make sure you’re:

• Set up with Font Awesome in your project.
• Using the SVG+JS method of Font Awesome.
• Familiar with the basics of adding Font Awesome icons.

Layers are awesome when you don’t want your page’s background to show through, or when you do want to use multiple colors, layer several icons, layer text, or layer counters onto an icon. For clarity in the example, we’ve added a background color on the layers so you can see the effect.

  <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>

Layering components	How it works
fa-layers	Wraps your stack of icons or text. You’ll likely want to also include an fa-fw class so your layers align.
Inner icons	Add as many icons as you like directly inside your fa-layers element. Icons stack with the last icon on the top.
fa-layers-text	Add inside your fa-layers element to put text on top of an icon. Combine with data-fa-transform for full control.
fa-layers-counter	Adds a counter to the top right of your icons. Can be positioned with fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right. Overflow text is truncated with an ellipsis.