Web

Layering Text & Counters

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

Advertisement

We’ll cover the basics of how to use custom CSS to get layered effects.

Before You Get Started

Make sure you're:

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="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>
Power Transform layering
Advertisement

Layer Text Rendering Issues

Currently any text layers (.fa-layers-text) are not rendering properly when using the SVG+JS method of Font Awesome.

We're aware of the issue and are resolving the issue very shortly. In the meantime, we recommend using some custom CSS to get the same desired effect of text layered on top of an icon.

Layering Element 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.

Customizing

Advertisement

We've added CSS custom properties (opens new window) to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome's defaults.

CSS Custom Property Details Accepted Values
--fa-counter-background-color Set fa-layers-counter's background color Any valid CSS color value (opens new window)
--fa-counter-border-radius Set fa-layers-counter's border radius Any valid CSS border-radius value (opens new window)
--fa-counter-line-height Set fa-layers-counter's line-height Any valid CSS line-height value (opens new window)
--fa-counter-max-width Set fa-layers-counter's max-width Any valid CSS width value (opens new window)
--fa-counter-min-width Set fa-layers-counter's min-width Any valid CSS width value (opens new window)
--fa-counter-padding Set fa-layers-counter's padding Any valid CSS padding value (opens new window)
--fa-counter-scale Set how much fa-layers-counter is scaled up/down Any valid CSS transform scale value (opens new window)
--fa-top Set top offset of .fa-layers-top-left or layers-top-right Any valid CSS top value (opens new window)
--fa-right Set right offset of .fa-layers-top-right or layers-bottom-right Any valid CSS right value (opens new window)
--fa-bottom Set bottom offset of .fa-layers-bottom-left or layers-bottom-right Any valid CSS bottom value (opens new window)
--fa-left Set left offset of .fa-layers-top-left or layers-bottom-left Any valid CSS left value (opens new window)
--fa-inverse Set color of an inverted stacked icon Any valid CSS color value (opens new window)