Font Awesome Icons are really useful for signposting website content.
Good news, the default Joomla! CMS is already equipped with the necessary Font Awesome font-family.
This means you can assign any one icon to a Menu Link or a string of text in one or more of 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.
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 plethora of icons provided by the Font Awesome developer at the following link.
View: Font Awesome 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.
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.
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
Not so simple.
Reason: you have to edit the underlying HTML code.
To do so select the Code tab when editing an Article (if you use the JCE Content Editor, recommended).
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
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.
WYNCHCO Joomla! CMS Support
We coach, help and support managers with responsibility for Joomla! websites in organisations across Cheshire, Manchester, Merseyside, North West England & the UK.
Your personal data is nobody's business.