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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using 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.
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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons