Font Awesome Icons Not Showing Up Correctly - Question | JoomShaper
Back to the questions

Font Awesome Icons Not Showing Up Correctly

T

Thierry

Helix Framework 1 year ago

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

0
4 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #102415

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.

info_126_2023.jpg

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #102416

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

info_127_2023.jpg

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #102419

extra tip!

To add small space between menu item and icon:

.fa-home::before, 
.fa-store::before {padding-right: 3px; }
0
T
Thierry
Accepted Answer
1 year ago #102795

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.

0