You can stack our icons easily with the support styling bundled with Font Awesome.
We’ll cover the basics of aligning stacked icons alongside single icons, changing default font size, changing the default font size with stacking, and simple CSS customizations.
To stack multiple icons, use the
fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the
fa-stack-1x class for the regularly sized icon and add the
fa-stack-2x class for the larger icon.
fa-inverse can be added to the icon with the
fa-stack-1x to help with a knock-out looking effect. You can even throw larger icon classes on the parent to get further control of sizing.
Aligning Stacked and Regular Icons
You can use stacked icons right alongside single icons. Since stacked icons are styled by our framework's included CSS to be twice the size of single icons, you'll need to either size down the stacked icon or size up the single icons.
Changing the Default Font Size with Stacking
When you stack icons but change the font-size, you'll need to make some adjustments to your CSS to keep the icons aligned.
|Used on a parent HTML element of the two icons to be stacked|
|Used on the icon which should be displayed at base size when stacked|
|Used on the icon which should be displayed larger when stacked|
|Inverts the color of the icon displayed at base size when stacked|
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|
|Set z-index of a stacked icon ||Any valid CSS |
z-index value(opens new window)
|Set color of an inverted stacked icon ||Any valid CSS |
color value(opens new window)