Replacing fa fa-youtube icons with fab fa-youtube

Hi there,

As the title says I wanted to replace the fa fa icons with fab fa icons. I am using fontawesome 5 with a code snippet I have found in previous posts, I have been able to change some of the icons to the new youtube logo (fab fa) but I can’t for some of the other parts on my site. I believe the one unchangable is in the sydney facts category.

Any ideas on how I can change this, if possible? If not are athemes looking to move onto fontawesome 5 (which I currently believe is not the used version)

Many thanks,
David

Hi David,

Can I inspect directly which part you want to change the icon on? Please share a link to your page needing help with here? And point me the location with a screenshot?

Regards,
Kharis
aThemes Support

Hi Kharis,

Sure thank you. The link is: https://zypra.co.uk/

The areas I want to change the icon for are:


The youtube icon there and under the “my following” category there is another one, I can’t upload another image as I am a “new user”.

Many thanks,
David

Hello David,

Thanks for the link!

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

.fa.fa-twitch,
.fa.fa-youtube,
.fa.fa-twitter,
.fa.fa-facebook,
.fa.fa-instagram,
.social-links a:before {
    font-family: "Font Awesome 5 Brands" !important;
}

.fa.fa-gamepad,
.fa.fa-tv {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

athemes looking to move onto fontawesome 5 (which I currently believe is not the used version)

Really, with the Sitepanel Page Builder the font awesome lib is outdated (4.7.0). I will speak with out development team about that.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hello Rodrigo,

Many thanks for that, worked a treat! I’d appreciate it if that’s possible, I’ve seen a lot of posts about fontawesome 5 library. I am using the sitepanel page builder, but I’d rather not try and rework the homepage with it, if others are looking for the updated library.

Just one further query. My “Sydney FP: social profile” is using the social menu I have in the header, but isn’t showing some icons that are displaying in the header. It seems to be using the same menu-item classes as the header so I am confused as to why they won’t display?

Many thanks again,
David

Helllo David,

Great!

Regarding the “Sydney FP: Social Profile”, please try adding the given custom CSS code below:

.social-menu-widget a[href*="https://www.twitch.tv/"]:before {
	content: "\f1e8";
}

.social-menu-widget a[href*="https://discord.gg/"]:before {
	content: "\f392";
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hello again Rodrigo,

Legend thank you, that worked a treat!

Many thanks for your assistance again today! :slight_smile:

Best,
David

Hello David,

You are welcome! :slight_smile:

If you need further help, feel free to contact us.

Kind Regards,

Rodrigo.

aThemes Support