Hi Ron

Yes, this does indeed sounds like a Font Awesome versioning issue. Have you installed the modules from your Layla template bundle? If yes, 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.

Ciaran

Ciaran,

Requested info is on the way.

I did upload the modules that came with Layla. The problem did not appear to be the modules as the use of Font Awesome also did not work on menu items.

Layla is on the site, but Skyler is the current default.

Thank you for taking a look.

Cheers,

Ron

Hello all,
I am having the same problem with the Layla template. I installed the template and the layerslideshow module.

I checked the demo site for Layla template and there Joomla51.com uses it like this:

class="fa fa-twitter"

If i use it like this, e.g. in an anker, like this:

<a href="#" class="fa fa-envelope">

than I can see the icon but my following anker text is in a serif font and no longer in the normal site font I have choosen (see screenshot).

A workaround could be:

<i class="fa-envelope"></i>

before the anker definition.
But this is less comfortable than in older templates where I only had to set the correct class without an extra "fa" class and without font issues.

I would prefer working again like we could before with a class for each FA icon, no extra classes ... no issues.
But thats only my opinion

Oliver

Hello

As the Layla template now uses Font Awesome 5 there is a couple of unavoidable side effects. Firstly as FA5 has a number of categories (Solid, Regular, Brands etc.), we can no longer define a font with a single class. FA requires that the icon class be prepended with a category class (.fas, .far, .fab etc.). So instead of ...

<i class="fa-envelope"></i>

You must use..

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

This also applies for menu items. Where before you could use fa-envelope you must now use fas fa-envelope.

A second issue is how FA5 applies its CSS which differs from FA4. This is a little more technically to explain but in short you must now a a font separately to the text. So before you could use...

<a href="#" class="fa fa-envelope">Your Link</a>

You now must use...

<a href="#"><i class="fas fa-envelope"></i> Your Link</a>

Ciaran

Ok, that is not good. Why? Because I have to do this in HTML Code and cannot even quickly add e.g. a FA class to a link.

Is there a possibility to go back to the former font-awesome declaration? If I delete all FA5 files out of the template > fonts folder and add the older ones? is there anything I had to change e.g. in one of the main php files too?

Or do you have another workaround?

Sorry Ciaran but I think not every "new" version seems to be a good idea.
I love FA because it gives the site a more "expert" look if one uses it in the right way but we all have to work fast and "time is money" so every new thing that "costs" more time is more money for the customer
But this is only my sight and it mustn't be right.....

Ciaran,

Thanks for the explanation; pretty simple, really. I'm not quite sure why this did not occur to me. Perhaps, with Arsenal winning a few matches lately, I have just become giddy.

For others who may be interested, I have attached a link to Font Awesome and their presentation of the use of FA 5.

Cheers,

Ron

Hi Oliver

We had held back on updating to FA5 for as long as possible but with the release of FA6 on the horizon and considering there was a few requests to update, we felt it was time to make the change.

To revert to FA4 simply disable Font Awesome in the General -> Typography tab of your template settings. And add the following to the Custom Head Code field in the Custom Code tab.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Ciaran

Thank you Ciaran for the information. I will try this