Skip to main content

 

Traditional Web

 

Applies only to Traditional Web Apps

 

OutSystems

Stacked Icon UI Pattern Reference

  • Edit
  • 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

    1. Drag a Tooltip Pattern into the page.

    2. Set the parameters for the Tooltip behavior.

    3. In the Widget placeholder, drag a StackedIcon Pattern.

    4. Set the parameters for the SatckedIcon Pattern.

    5. In the Content placeholder, from the Tooltip Pattern, set the desired label for the icon.

    6. 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.

    • Was this article helpful?