Font Aswesome in Top Nav

[abdurrehman]

Hi,

I’m adding the this in the content box in the top nav.

Send a WhatsApp | Click To Call 12346789

How can I add fontawesome icon before to each e.g for whatsapp 1st icon then the Send a WhatApp.

Thanks

[ruenel]

Hello There,

Thanks for writing in!

To resolve your issue, please update your code and make use of this code instead:

<a href="https://api.whatsapp.com/send?phone=1234567&text=Hi,%20I%20would%20like%20to%20receive%20a%20call%20back%20from%20Service%20Advisor"><i class="x-icon x-icon-whatsapp" data-x-icon-b="&#xf232;" aria-hidden="true"></i> Send a WhatsApp </a> | <a href="tel:12346789"><i class="x-icon x-icon-whatsapp" data-x-icon-b="&#xf40c;" aria-hidden="true"></i> Click To Call 12346789</a>

We would loved to know if this has work for you. Thank you.

[abdurrehman]

Thanks, it worked. I tried to add the call button but that’s not showing up.

My code for the call is as below:

<i class="x-icon x-icon-phone" data-x-icon-b="&#xf095;" aria-hidden="true"></i>

What’s wrong with this?

[rad]

Hi @abdurrehman,

Please try this one

<i class="x-icon x-icon-phone" data-x-icon-b="&#xf098;" aria-hidden="true"></i>

It could be due to icon code.

Thanks!

[abdurrehman]

Yeah, I see that you have changed that from 95 to 98 but it doesn’t change that. I checked it here https://fontawesome.com/v4.7.0/icon/phone

It doesn’t work see that on the URL on top nav left content, from the notes.

[rad]

Hi @abdurrehman,

The new font awesome version is 5 which is already part of the builder and theme. But please try this

<i class="x-icon x-icon-phone" data-x-icon-s="&#xf098;" aria-hidden="true"></i>

It’s either data-x-icon-b or data-x-icon-s, it works on your site.

Thanks!

[abdurrehman]

[quote=“Rad, post:6, topic:42502”]
data-x-icon-s
[/quote]This worked. Is there any list or file that I could check the X icons?

[rad]

Hi @abdurrehman,

You can check it here https://fontawesome.com/icons?from=io, just click an icon and the icon code will be displayed. Then you may try the attribute data-x-icon-b or data-x-icon-s.

Thanks!