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.
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. Power Transform layering
|Layering Element ||How It Works|
|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.
|Add inside your |
fa-layers element to put text on top of an icon. Combine with
data-fa-transform for full control.
|Adds a counter to the top right of your icons. Can be positioned with |
fa-layers-top-left and the default
fa-layers-top-right. Overflow text is truncated with an ellipsis.
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.