How to make Top Bar phone clickable

[liorgo81]

Hi there,

1. Is it possible to make the phone number at the top bar clickable?
2. Is it possible to add an icon to it?

#1 is more important
Thanks,

[RadioJB]

Hello!
Yes, you can do it by adding a tel protocol to your link.
You can find more information here.
Good luck!

[liorgo81]

Yeah but I can’t seem to add it directly to the phone #.
Do I need to add it in the CSS?

[RadioJB]

No, just add a HTML snippet like this: <a href="tel:+15628675309">1-562-867-5309</a> and your link become clickable.

[liorgo81]

Oh yeah! Thanks!

Q #2 - do you know if it’s possible to add an icon to it?

[RadioJB]

Yes, It’s possible.
I’ve found a good explanation on forum.

[liorgo81]

but that deals with a button; I’d just like to add it next to the phone number…

[RadioJB]

Yes, but you can use it for your needs, just change CSS selector to class of your link.
For example:
Link has class link-w-icon and your HTML snippet looks like this: <a href="tel:+15628675309" class="link-w-icon">1-562-867-5309</a>
You have to swap provided in example selector with link-w-icon

.link-w-icon {
	content: '';
	width: 30px;
	height: 30px;
	display: inline-block;
	overflow: hidden;
	background: url('COPIED URL') center center no-repeat; 
	background-size: contain;
	vertical-align: middle;
}

[mldarshana]

Thanks @Zarudny for your contribution.

@liorgo81 … Let us know if you have further questions or issues.

Thanks!