# Layering Text & Counters

How to layer multiple Font Awesome icons for advanced visual effects.

> 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](/web/style/stack.md). 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.

Make sure you're:

- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Using [the SVG+JS method of Font Awesome](/web/dig-deeper/webfont-vs-svg.md).
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

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.

  <img
    slot="media"
    src="/web/style/images/layering.png"
    alt="Layering"
  />
  <span class="wa-card-image-description">
    Layering
  </span>

```html
<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fa-solid  fa-circle" style="color:Tomato"></i>
    No
  </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>
```

  <h4>
    Your Turn!
  </h4>

Try laying it on thick with these <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/fontawesome/pen/wvbGReB">Codepen layering examples</a>.

  <h4>
    Layering Rendering Issues
  </h4>

Currently layers with multiple icons are not rendering properly. We're aware of the issue and are working on a fix. In the meantime, <strong>we recommend using additional CSS to get the desired effect of layered icons</strong>.

| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to make customizing easier and more efficient. Define your own values for the following properties to [override and customize](/web/style/custom.md#using-custom-properties-in-a-project) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)                            |
| `--fa-counter-border-radius`    | Set `fa-layers-counter`'s border radius                                | Any valid CSS `border-radius` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)                  |
| `--fa-counter-line-height`      | Set `fa-layers-counter`'s line-height                                  | Any valid CSS `line-height` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)                      |
| `--fa-counter-max-width`        | Set `fa-layers-counter`'s max-width                                    | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)                                  |
| `--fa-counter-min-width`        | Set `fa-layers-counter`'s min-width                                    | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)                                  |
| `--fa-counter-padding`          | Set `fa-layers-counter`'s padding                                      | Any valid CSS `padding` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)                              |
| `--fa-counter-scale`            | Set how much `fa-layers-counter` is scaled up/down                     | Any valid CSS `transform` scale [value](<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>) |
| `--fa-top`                      | Set top offset of `.fa-layers-top-left` or `layers-top-right`          | Any valid CSS `top` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/top)                                      |
| `--fa-right`                    | Set right offset of `.fa-layers-top-right` or `layers-bottom-right`    | Any valid CSS `right` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/right)                                  |
| `--fa-bottom`                   | Set bottom offset of `.fa-layers-bottom-left` or `layers-bottom-right` | Any valid CSS `bottom` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)                                |
| `--fa-left`                     | Set left offset of `.fa-layers-top-left` or `layers-bottom-left`       | Any valid CSS `left` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/left)                                    |
| `--fa-inverse`                  | Set color of an inverted stacked icon                                  | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)                            |