I would like to have some font awesome icons in front of my menu links. I have put the class e.g. fa fa-home or fas fa-home in the Link Class of the menu item. Font awesome is enabled in the Helix template. All I get is a small box in Edge or the FA code using Firefox. Any help greatly appeciated as have researched for a couple of hours with no joy.
Joomla 4.2.6
Helex Ulimate 2.0.11
Awaiting an answer
Helix Framework
Font awesome icons not showing up correctly
4 replies
Paul Frankowski Senior Staff
3 years ago
· edited
Hi Thierry,
to be honest it's probably your mistake.
You added / used that code
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
font-family: 'Arial', sans-serif;
}And Arial font override FontAwesome.
Besides "fa fa-store" was used in Font Awesome 4.7, not in Font Awesome 5 - check on project site.
Paul Frankowski Senior Staff
3 years ago
· edited
Duct tape / temporary but working solution will be:
.sp-megamenu-parent > li.sp-menu-item .fa
{ font-family: "Font Awesome 5 Free" !important; font-weight: 800 !important; }Custom CSS method.
....and after using it
Paul Frankowski Senior Staff
extra tip!
To add small space between menu item and icon:
.fa-home::before,
.fa-store::before {padding-right: 3px; }
Thierry Asked this
Hi Paul,
Thank you for being honest but I certainly did not add this code. It is strange the icons did not show up in the menu as they appear in the off canvas menu fine.
Anyway, I placed your code in custom.css and it did not change anything. Have I put the code in the correct place?
Many thanks for your time and help.
Log in to reply.