Recent
Categories
View Replies (3)

Font awesome icons version 4 and 5

0
Votes
Undo
  1. Digijoom
    Digijoom
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 23 February 2021
  5.  Subscribe via email
Hello,

I have posted this question in an old thread : https://joomla51.com/forum/additional-font-awesome-icons
But maybe that will not be read or am I not patient enough or both. Anyway I made this new post.

I have problems with font-awesome icons in the template Chelsea. I add the custom code and css like Ciaran said in that thread.



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

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

}


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
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

As some of your fonts are still using the FontAwesome 4 classes you most likely need to load the v4-shims.css which ports all the old FA4 classes to the FA5 equivalent icons.

To load FontAwesome 5, add the following to the Custom Code -> Head Custom Code field of your template settings...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css">


Also, disable Font Awesome in the General -> Typography tab.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Digijoom
Digijoom
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

Thank you for answering. I tried what you suggest but then the social icons like facebook and instagram disappeared.
After some searching I found the solution myself. I haven't load the 2 fa code rules in Head custom code.
I already had this in the custom css:

}


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

  font-family: "Font Awesome 5 Free" ;

  font-weight: 900;

}


And when I make this from the code all icons are shown correct.



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

  font-family: "Font Awesome 5 Free","Font Awesome 5 Brands" ;

  font-weight: 900;

}


Best regards
Kees
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
That's great Kees... glad to see you found a solution and thank you for sharing! :)

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!