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.
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 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.
External Links
Links to PDF Files
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.
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.
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
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.
JOOMLERS.UK is sponsored by WYNCHCO Solutions
We help and support managers responsible for Joomla! CMS websites in UK business, academy school and third sector organisations across Cheshire, Greater Manchester, Merseyside and North West England.
