Stacked Icon UI Pattern Reference
Collaborate with us
Edit this page on GitHub
Layout and classes
CSS selectors
| Element | CSS Class | Description |
|---|---|---|
| .stacked-icon | .fa-2x | Change the icon size, to 2em |
| .stacked-icon | .fa-3x | Change the icon size, to 3em |
| .stacked-icon | .fa-4x | Change the icon size, to 4em |
| .stacked-icon | .fa-5x | Change the icon size, to 5em |
| .stacked-icon | .fa-lg | Change the icon size, to 1.33333333em |
Advanced use case
Use the Stacked Icon Pattern with a tooltip
-
Drag a Tooltip Pattern into the page.
-
Set the parameters for the Tooltip behavior.
-
In the Widget placeholder, drag a StackedIcon Pattern.
-
Set the parameters for the SatckedIcon Pattern.
-
In the Content placeholder, from the Tooltip Pattern, set the desired label for the icon.
-
Publish and test.
Notes
The InvertSize parameter changes the sizes of the back and front icons with each other. This means toggling the .fa-stack-1x and .fa-stack-2x CSS classes.