Font Awesome Icons

CTA buttons and a few components have the option to set a Font Awesome icon, which comes from the Font Awesome library. When configuring the component, the text entered in the Font Awesome Name field will determine what icon is displayed.

You can copy the icon name (example highlighted in yellow below) from the website after finding the desired icon.

There will often also be a Font Awesome Style to choose from, which affects how the icons are styled (ie. Solid colour, outline, etc).

Popular Font Awesome Icons used on BCLC Corporate

Below is an example of the treatment of links for the Related Items component. 

Note: Documents (ie. PDF) will always have a document icon regardless of whether it is linked internally or externally.

Font Awesome Troubleshooting

If an icon does not display properly in AEM, it could be one of the following reasons:

  • The icon does not exist in the selected style; find the icon in the FA library and see what styles are available to use (or try a different style in the component configuration)
  • The icon version is different from what we currently use (version 5.1) and therefore an alternative icon must be selected