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.

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

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

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

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)