Change Default Icons In Top Position - Question | JoomShaper

Change Default Icons In Top Position

ML

Mike Lawson

Helix Framework 1 week ago

Hello, I am using a default header for my website in helix (top bar header) and would like to change the default font awesome icons for the phone, mobile, and email sections in the top position..Im attaching a link to the screenshot highlighting the items..I need to know the custom CSS to update it, please.

https://prnt.sc/Q8CNLYbtznQf

0
4 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #212320

Look again Up, added more info. Yes, use Custom CSS to make this change. Sorry, but I am not FA support, I shared basic tips only, the whole rest on your hands/keyboard.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #212318

Hi Mike.

This is task from CSS & FA category, not even a Joomla itself.

All you have to do is override FA icon "ID" code from default to a new one, using the same FA version.

You have to override those classes:

  • .fa-phone::before {content: "\f095";}
  • .fa-mobile-alt::before {content: "\f3cd";}
  • .fa-envelope::before {content: "\f0e0";}

using new Icon(s) code from Font Awesome Free version 5.15 | https://fontawesome.com/icons

info_3640_2025.jpg

with v6 should work as well, but remember Free icons, not "Pro"

info_3641_2025.jpg

It means that a new 1st phone icon can be that one "phone-volume"

.fa-phone::before {content: "\f2a0";}

0
ML
Mike Lawson
Accepted Answer
1 week ago #212319

Frank

Im a little confused. So this is a CSS edit in a specific core file? Or in Custom CSS field? Please elaborate and share valid CSS to make this change happen. Thanks

0
ML
Mike Lawson
Accepted Answer
1 week ago #212323

Frank

All set, that is what I needed..thanks for the clarification.

0