Hi Chris

Strangely we are unable to replicate this issue. Are you finding the issue in any particular browser?

Ciaran

Hi Ciaran

I tried Firefox, Edge and Chrome. The icon is being displayed slightly different by these browsers but none of them displays it correctly. See screenshots.

Thank you and kind regards
Chris

Firefox


Edge and Chrome

Hi Ciaran

in addition to this issue I just found out, that the mobile menu is not visible. It is there and clickable though, if you guess where it might be.

Thank you and kind regards
Chris

Hi Chris

I notice your fonts are using the older FA4 syntax which may be causing the issue. Joomla 4 is now using FA5. Does changing your code markup for the globe icons to the following resolve the issue for you?..

<i class="fas fa-globe"></i>

Ciaran

Hi Ciaran

your proposal did not resolve the issue. For me it looks as if Fontawesome is not implemented or loaded at all:

- None of the fontawesome icons within these articles are displayed correctly
- there is no mobile menu visible (which is made with Fontawesome as well)
- The parent indicator in the menu looks strange (which is made with Fontawesome as well)

On your demo website we have one single link related to font-awesome (with hyphen)

<link href="/demo/0167/templates/j51_ensley/css/font-awesome.min.css" rel="stylesheet" />

On my website we have several links related to fontawesome (without hyphen)

<link href="/media/system/css/joomla-fontawesome.min.css?bd978d2e3e90049781cd4505bba4aa2f" rel="stylesheet" />

<link href="/templates/j51_ensley/css/fontawesome/fontawesome.min.css?bd978d2e3e90049781cd4505bba4aa2f" rel="stylesheet" />

<link href="/templates/j51_ensley/css/fontawesome/v4-shims.min.css?bd978d2e3e90049781cd4505bba4aa2f" rel="stylesheet" />

<link href="/templates/j51_ensley/css/fontawesome/regular.min.css?bd978d2e3e90049781cd4505bba4aa2f" rel="stylesheet" />

<link href="/templates/j51_ensley/css/fontawesome/brands.min.css?bd978d2e3e90049781cd4505bba4aa2f" rel="stylesheet" />

<link href="/templates/j51_ensley/css/fontawesome/solid.min.css?bd978d2e3e90049781cd4505bba4aa2f" rel="stylesheet" />

Thank you and kind regards
Chris

Hi Ciaran

the same issue is now popping up with another website. Them Template is J51_Jasmine_J4.
Here the parent indicator in the menu (made by Fontawesome) looks strange.
It used to be ok a couple of days ago.

Thank you and kind regards
Chris

Hi Chris

We have just updated the Ensley template with a number of fixes including a fix to hopefully resolve this issue. For details on updating your template may I suggest the following article.. https://joomla51.com/tutorials/joomla-basics/updating-your-joomla-template

If the issue persists after updating, may I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

We will have an update also the for the Jasmine template available shortly.

Thank you for your patience with this issue.

Ciaran

I should also mention that if using the old Font Awesome 4 syntax, you must add the fa class to the font element. In Joomla 3 this was not needed but as Joomla 4 is loading Font Awesome 5, it will be now required.

<i class="fa fa-check-square"></i>

Ciaran

Hi Ciaran

the new version of J51_Ensley_J4 did resolve the issue. Astonishingly the new Version of J51_Jasmine_J4 did not. In this case only the parent indicator in the menu is affected. Firefox displays an indefinable icon, Chrome display a rectangle.

Thank you and kind regards
Chris

Hi Ciaran

J51_Ensley_J4 is not completely satisfactory as far as the mobile menu is concerned:

- The background of the three bars is completely transparent and therefore the bars are hardly visible
- There are huge gaps between the menu items 2, 3 and 4. These are menu items of the type «separator».

Thank you and kind regards
Chris

Hi Chris

It is a tricky one for us as we strangely are unable to replicate this issue on our end. There is certainly an issue as there is a number of people reporting this one. Could I ask you to try adding the following to the Custom CSS field of your template settings and see if the issue is resolved?...

.hornav > ul .parent-indicator {

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

}

Ciaran

Hi Ciaran

I am happy to confirm, that this addition to custom.css did resolve this issue partially.

The parent indicator in the menu is ok now.
What keeps me frowning is the fact that this css sniplet was necessary for J51_Jasmine_J4 but it was not necessary for J51_Ensley_J4. Latter website worked without further ado after installing the latest version of the template.

Still unresolved is the issue that probably is related to the one mentionned above.

The mobile menu of both J51_Ensley_J4 and J51_Jasmine_J4 are not satisfactory:

J51_Ensley_J4
- The background of the three bars is completely transparent and therefore the bars are hardly visible
- There are huge gaps between the menu items 2, 3 and 4. These are menu items of the type «separator».
- See https://anav.ch/

J51_Jasmine_J4
- Instead of the three bars there is kind of a tiny arrow
- The whole mobile menu does not look very aethetic
- See https://carlacalderari.ch/

Thank you and kind regards
Chris

Hi Chris

We have just updated the Jasime template with a number of fixes regarding FontAwesome icons. Updating your Jasmine template to this latest download should now resolve these issues for you.

We hope to have a similar update for the Ensley template released shortly.

Ciaran

Hi Chris

The Ensley template has also been updated.

Ciaran

I am happy to confirm that J51_Jasmine_J4 is ok now. Now I am going to update J51_Ensley_J4 and report later.

I am happier and happier. J51_Ensley_J4 is ok now as well.

Great! Thank you so much!

Kind regards
Chris

Brilliant Thank you for the update and again for your patience on this issue

Ciaran