Font Awesome is an icon library and toolkit.
Font Awesome Icons are really useful for signposting website content.
The Joomla! CMS has been equipped with the Font Awesome library since Version 4.0.
This means you can assign Font Awesome Icons to Menu Links and to strings of text in your website's Articles and Custom Modules.
If you are not already doing so, we hope this article will help you get started using Font Awesome Icons in your website.
Two useful Font Awesome Icons
fa-home
Purpose: to signpost the Home Page Menu Link.
fa-external-link
Purpose: to signpost links to other websites.
But there are hundreds more to choose from.
See the vast range of icons provided by the Font Awesome developer here:
View: Font Awesome v4 Cheat Sheet
View: Font Awesome v6 Cheat Sheet
How we use Font Awesome Icons in our website
Here are some examples of how we have used Font Awesome Icons to signpost elements in our website.
In each case we browsed the Font Awesome Cheat Sheet (see link above) and copied the relevant icon name.
External Links
External Button Links
Links to PDF Files
WYNCHCO Joomla! 5 Template Position Map PDF (opens in new tab)
Menu Link Image Prefixes
Here are two examples:
We outline how to create similar Image Menu Links in our separate article.
How to add Font Awesome Icons
Here are a couple of illustrations of how to add icons to links to help get you started with using Font Awesome.
Home Page Menu Link
Straightforward task.
Open the Menu Link screen in your website's Dashboard.
Add the name of the Font Awesome Icon to the Link Icon Class field under the Link Type tab.
See image below.
Note
See how inserting the icon requires that you enter fa fa-home into the field, not simply fa-home.
Result
External Link inside an Article
Not so simple.
Reason: you have to edit the underlying HTML code.
Locate the relevant link and replace
</a></p>
with
</a><span class="fa fa-external-link" aria-hidden="true"><span class="hide">.</span></span></p>
Note
Two sets of <span> tags are used in the above example.
The first set is to enable the Font Awesome Icon to be displayed.
The second set, inside the first, is to hide the full stop from view.
The class attributes separately determine which icon is displayed and that the full stop is hidden from view.
The aria-hidden attribute hides the icon from screen readers.
Result
Link to PDF File
Again not so simple because of the need to edit the underlying HTML code.
And this time the editing is a little more complex and tedious.
We show how in our separate article.
Useful Link
A Joomla! Community Magazine (JCM) article published in November 2024 demonstrates more ways to use Font Awsome Icons in your website.
Read more: Icons are taking over the Web World (JCM Nov 2024)
JOOMLERS.UK is sponsored by WYNCHCO Solutions
WYNCHCO Solutions help and support managers responsible for Joomla! CMS websites in UK business and third sector organisations across Cheshire, Greater Manchester, Merseyside and North West England.
