Hi Marion

On which template are you having this issue?

Ciaran

oh sorry on Elvira , thanks Marion

Hi Marion

As you are trying to load a Font Awesome 5 icon, you must first load the FA5 icon set. To do so...

1. Disable Font Awesome in the General -> Typography tab of your template settings.

2. Add the following to the Custom CSS -> Custom CSS field of your template settings...

[class^="fa-"]::before, [class*=" fa-"]::before {

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

}

3. Add the following to the Custom Code -> Head Custom Code field...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

Ciaran

Perfect as always Ciáran, thank you sooo much !!!!

Hi Ciaran,

Tried this on a J51_Amelia template with no luck. Do I need another link?

Regards, Geert

Hi Geert

Would you have a URL to an example of your icons?

Ciaran

Hi Ciaran,

I had the same request of Marion. My template is Jasmine. Read this post and applied your advice.
It worked in the J51_icons module, but in other modules (inline icons module and social media links in the template setup) most of the icon disappeared, displaying only a blank square.

Can you pleas tell me how to fix this?
Regards
Marco

Hi Marco

Would you have a URL to an example of your icons? Note that in FA5 the HTML as changed slightly...

Eg.

<i class="fas fa-arrow-alt-circle-right"></i>

In particular note fa is been replaced with fas.

Ciaran

I tried this and it didn't work for me. It wrecked the styling on my site and the icon I wanted still didn't display even though I had the right things in place.

Hello

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.

Note Font Awesome 5 is not backward compatible with Font Awesome 4 as the class name has changed so some outlying issue may arise on areas extensions built for FA4.

Ciaran

Hello,

Because I had the same problems with font-awesome icons in the template Chelsea I add the custom code and css like Ciaran said in this thread.
But when I did this the social icons like facebook, instagram and youtube disappear. I see that they have another class in fa5.
By example : facebook is 'fab fa-facebook-square'.
So the fab is new and causes the disappearing.

I have been looking on the internet but untill now not found a good solution for this. When I'm changing the font family into this : 'font-family: "Font Awesome 5 Brands";' the other icons are dissapear.

Hope you can help?
Thanks