How to add telephone number to social links

Hi, hoping someone can help me with this!

I've managed to change the social icon in the header of my site to a phone icon using the code below:

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/656e55f66068ae77ac55628d/t/658de4e7f257f0065579dd87/1703797991836/phone-call-bold-svgrepo-com+%281%29.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(3) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/656e55f66068ae77ac55628d/t/658de4e7f257f0065579dd87/1703797991836/phone-call-bold-svgrepo-com+%281%29.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

But after reading other posts I can see that tel:000 doesn't work within the social links. Anyone know how to include your phone number in these blocks for it to work?

Website is currently: https://blue-armadillo-g5xg.squarespace.com/ with password gina1998

Thanks in advance for any help that could be given!

Hi @ginam

What are you wanting to happen when the telephone icon is clicked?

Hi there @ginam

I'm having the same issue as you, and want to be able to click the phone number social link to initiate a call to my business. Did you end up finding a solution around the issue of the social links not working for Tel: type links?

With your case @ginam, use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('header#header a.icon:nth-child(3)').attr('href','tel:+44(0)7397382226');
	});
</script>