Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Stacked Icon UI Pattern Reference

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    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

    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?