In the 5.6.0 release, we added a new component called the Icon Component. This allows Editors to display Font Awesome icons with the ability to link these components to appropriate links.
What is Font Awesome?
Font Awesome is AEM’s resource for iconography. For example, the footers in AEM use social media icons and icons for email, phone, and fax. We are using Font Awesome version 5.14.0 (Free Icons only).
Why use icons?
Icons draw users to your content and breakup text. Be careful of overuse of icons, this can take away from the context and content of the page and too many can distract and/or confuse the user.
Keep in Mind:
Icons should be easily recognizable and relatable to the content around it (social media, phone, map pin, etc).
Icons that don’t have a universal meaning or are applicable to content can cause confusion to the user.
Use icons sparingly to emphasize a section or content
How do I use the Icon Components?
Add the "icons" component to your page in AEM. More detailed instructions for this procedure can be found in the AEM Training manual on Canvas.
To configure the component, you will need some simple code from the Font Awesome site.
Visit the Font Awesome Icon Library (Free Icons). Upon reaching the site please check the upper right quadrant of the page for a dropdown menu indicating which version of Font Awesome you are using. It should default to 5.15.4, but if you see 6.3.0, please click the dropdown and change it to the older version.
Select the icon that you want, and copy the icon class in the code provided on the page. For example, the icon class for Facebook will read <i class="fab fa-facebook"></i>
Return to the AEM page you are working on and open the icons component to configure the settings. You will then paste the code you copied into the 'Font Awesome Icon Class' field, but then, you will need to delete everything outside and including the quotation marks. So for example:
- <i class="fab fa-facebook"></i>
will become - fab fa-facebook
In the Icon Tab, this is where you add the information for the icon class, url (optional), and accessibility text.
Add the icon class code (e.g. fab fa-facebook) in the Font Awesome Class field. If you are linking this icon, add the appropriate URL in the Icon URL Field.
If your icon has a linked URL you must include link text for accessibility (i.e. - screen readers). This text should tell users what they will find or where they will be taken when they click on the icon.
Click on the Styles tab to configure padding, size, and color for the icons. The default color for the icons is the Font Awesome default which is Dark Charcoal (#333). These colors have been tested for web contrast against a white background.
If you have any additional questions about the Icons Component or experience issues while using it, please reach out to the Technology Services Team.
