Font Awesome 6 - Documentation (O11)

Give us feedback

Stable version 2.1.1 (Compatible with OutSystems 11)

Uploaded on 25 Apr (4 days ago) by

5.0

(7 ratings)

Documentation

2.1.1

Font Awesome 6 Icons Library

This initial version is based on the Font Awesome 6 Beta 3, and will be updated as soon as new updates are released from Font Awesome (https://fontawesome.com/v6.0).

The component exposes 2 Blocks:

FA6Icon
FA6StackedIcon

To display an Icon on a reactive web or mobile app page, simply drag and drop the FA6Icon block to the desired location, and set the following input parameters:

IconName - double-click to choose from a list of 2059 available icons (defaults to flag)
IconSize - select the icon size to display, from the available options 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x, lg, sm, xl, xs, xxl, xxs (defaults to 1x)
IconRotate - rotation to apply to the icon, from the available options 90, 180, 270 degrees (defaults to NullIdentifier(), aka no rotation)
IconFlip - flip mode for the displayed icon, from the available options horizontal, vertical, both (defaults to Nullidentifier(), aka no flip)
IconAnimation - animation to apply to the displayed icon, from the available options Beat, BeatFade, Bounce, Fade, Flip, Pulse, Shake, Spin, SpinPulse, SpinReverse (defaults to NullIdentifier(), aka no animation)
Monospaced - indicates if the block should always have the same width, regardeless of the chosen icon (defaults to True)
ExtendedClass - aditional CSS classes to apply to the displayed icon

To display a stacked Icon on a reactive web or mobile app page, simply drag and drop the FA6StackedIcon block to the desired location, and set the following input parameters:

OuterIconName - double-click to choose from a list of 2059 available icons (defaults to ban)
OuterIconExtendedClass - aditional CSS classes to apply to the outer displayed icon
InnerIconName - double-click to choose from a list of 2059 available icons (defaults to ban)
InnerIconExtendedClass - aditional CSS classes to apply to the inner displayed icon
IconSize - select the icon size to display, from the available options 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x, lg, sm, xl, xs, xxl, xxs (defaults to 1x)
IconRotate - rotation to apply to the icon, from the available options 90, 180, 270 degrees (defaults to NullIdentifier(), aka no rotation)
IconFlip - flip mode for the displayed icon, from the available options horizontal, vertical, both (defaults to Nullidentifier(), aka no flip)
IconAnimation - animation to apply to the displayed icon, from the available options Beat, BeatFade, Bounce, Fade, Flip, Pulse, Shake, Spin, SpinPulse, SpinReverse (defaults to NullIdentifier(), aka no animation)

The Demo allows you to play with the options, and see them in action.

2.1.0

The Font Awesome 6 Forge Component was updated to version 2.1.0.

On this new version, you will find:

Updated to Font Awesome 6.1.2
Icons list updated, now counting 2059 free icons
A Demo package is now included on the Forge Component

No changes were made to the widgets available.

2.0.1

Font Awesome 6 Icons Library

This initial version is based on the Font Awesome 6 Beta 3, and will be updated as soon as new updates are released from Font Awesome (https://fontawesome.com/v6.0).

Main Features include:

1733 Icons (Free)
3 Styles (Solid, Regular, Brands)
16 Standard Icon Sizes
3 Rotation Angles (90º, 180º, 270º)
3 Flip Effects (Horizontal, Vertical, Both)
8 Animation Effects
Stacked Icons
Prefixed CSS Classes (they don't override other Font Awesome libraries, mainly the standard Outsystems Platform Icons library)

The component exposes 2 Blocks:

FAIcon
FAStackedIcon

Just drag and drop the Icon Block to your Page or Block, and set the input parameters accordingly. You can use the ExtendedClass input parameters to set the Icon color, for instance.

The Demo allows you to play with the options, and see them in action.