How to change or replace the top social bar icon and redirect links

Dear Sir,

I have enclosed a screenshot kindly review and assist, is it possible to replace the icon from the phone, email and its redirect link. For e.g, i want to replace the email icon and want to put chat icon as enclosed in the screenshot.

Kindly assist, how to achieve that
Regards
Rahul

Hi,

You can change the unicode of the existing icon using this example code:

.header-contact-info .fa-phone:before {
    content: "\f086";
}

The code above are trying to change the phone icon using comment icon.

You can find this unicode – f086 from here https://fontawesome.com/icons/comments?style=solid
Screenshot_163

Regards,

Sir that did not worked. the site is live sir. your can visit the site by using .com (name enclosed in the screenshot)

Hi,

I didn’t see it, can you enable it for a while when I check on it?

Sir, Please check now I have enable it for you.

Ok, thank you.

Sorry, I forget to mention that now the theme is using the SVG icon, so the code above will not work.

But, here is the trick to use fontawesome icons on your site. Make sure you have fontawesome installed on your website (I’ve check your site and you already have fontawesome in there)

jQuery('.header-phone').prepend('<i class="fa fa-comment"></i>');
jQuery('.header-email').prepend('<i class="fa fa-comment"></i>');
jQuery('.header-address').prepend('<i class="fa fa-comment"></i>');

Change the fa-comment with your Fontawesome icons.
Then, add this to Customize > Additional CSS:

.header-contact-info .icon-holder {
    display: none;
}

That’s awesome sir. And I am sure this will work for what we are trying to achieve. Allow me some time to do this, if it will not work I will revery back to you sir.

Very Very Thank you for your efforts and thank you very much in advance.
Best Regards,
Rahul Kumbhare.

1 Like