Font Awesome examples

Icon as Object (with title attribute—inspect the DOM to see it)

Icon looked up in library by name

Possible after adding the faUser icon from the free-solid-svg-icons package to the library.

The default prefix of fas is assumed. Also, add a border.

Duotone icons

Swap layer opacity.

Custom primary or secondary layer opacity.

Custom primary or secondary layer color.

Icon with Non-default Style Prefix Using [prefix, iconName]

icon should be set equal to an array object with two string elements: the prefix and the icon name.

Using a string for an icon name also requires that this icon has been added to the library with library.add()

Icon as Object with non-Default Prefix

The icon object knows its own prefix, so the prefix is not specified in this case.

With Mask and Transform

Change Size

Change color

Using custom style:

Using custom class:

Rotate

Animations

Slide to turn up the magic.

Stack

Stack multiple icons into one.

Layers

Custom icons created with multiple layers.

Using text as one of the layers.

Fallback icon

Icon uses a fallback icon when the main icon parameter is not specified. Useful for when the icon is loaded asynchronously. If no fallback icon is specified, the icon will not appear. (Not shown in this example.)