Change default icons in top position - Forum | JoomShaper
Solved Helix Framework

Change default icons in top position

Asked by Mike Lawson 9 months ago Last activity 9 months 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

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
9 months ago · edited

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.

3 more replies

Paul Frankowski Senior Staff
9 months ago · edited

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";}

Mike Lawson Asked this

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

Mike Lawson Asked this

Frank

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

Log in to reply.