Jump to content

Custom Social Icon - Phone

Recommended Posts

Hi all,

I'm trying to add a Phone symbol in the header nav as a social icon on this site.

A couple of things to consider:
 - It would be really cool to only display this icon at mobile (given not many calls will come from desktop/tablet).
 - The header is dark blue, but the mobile menu is white, so icon needs to invert when mobile menu is expanded.

Is somebody able to help me target the standard chain icon and replace with a phone please?!

I have the SVG code from FontAwesome which I have included below:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M375.8 275.2c-16.4-7-35.4-2.4-46.7 11.4l-33.2 40.6c-46-26.7-84.4-65.1-111.1-111.1L225.3 183c13.8-11.3 18.5-30.3 11.4-46.7l-48-112C181.2 6.7 162.3-3.1 143.6 .9l-112 24C13.2 28.8 0 45.1 0 64v0C0 295.2 175.2 485.6 400.1 509.5c9.8 1 19.6 1.8 29.6 2.2c0 0 0 0 0 0c0 0 .1 0 .1 0c6.1 .2 12.1 .4 18.2 .4l0 0c18.9 0 35.2-13.2 39.1-31.6l24-112c4-18.7-5.8-37.6-23.4-45.1l-112-48zM441.5 464C225.8 460.5 51.5 286.2 48.1 70.5l99.2-21.3 43 100.4L154.4 179c-18.2 14.9-22.9 40.8-11.1 61.2c30.9 53.3 75.3 97.7 128.6 128.6c20.4 11.8 46.3 7.1 61.2-11.1l29.4-35.9 100.4 43L441.5 464zM48 64v0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0s0 0 0 0"/></svg>

Thanks!

Joe

Edited by Fluid
added fontawesome svg code
Link to comment

I've just checked back on the website and I can no longer add a social link with a URL starting with tel: 

It appears to always append http:// to the beginning of it, which breaks the link.

So for now I've removed the social link which we were originally planning to replace with the phone icon. I think the new solution would need to just place the icon there rather than replace one that's existing. Unless anyone has a way of creating a social icon with a tel: link.

FYI @tuanphan

Link to comment
On 4/24/2023 at 9:05 AM, Fluid said:

I've just checked back on the website and I can no longer add a social link with a URL starting with tel: 

It appears to always append http:// to the beginning of it, which breaks the link.

So for now I've removed the social link which we were originally planning to replace with the phone icon. I think the new solution would need to just place the icon there rather than replace one that's existing. Unless anyone has a way of creating a social icon with a tel: link.

FYI @tuanphan

You can add link then we can give code to change link to tel:

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Following along.

Here's the code I have which works for changing the icon but I'm having the same issues about Squarespace now adding http:// to the tel: link.

Quote

#footer-sections {
  .sqs-svg-icon--list a:nth-of-type(3) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/6347793bddaee1636193cb71/t/6369ad1ccacb0736208d6ba7/1667869980782/Asset+2.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}
}

Change the number in "nth-of-type(3)" to the number of the item (first, second etc)

You can also change the background image to "https://static1.squarespace.com/static/6347793bddaee1636193cb71/t/6369ad0daffa6b66beb0a4ee/1667869965881/Asset+1.png" if you want it to be black.

Any help with the tel: issue would be greatly appreciated!

Link to comment

Looks like I didn't read the question carefully.

You want

  1. Change chain icon to phone icon, use this icon: https://fontawesome.com/icons/phone?f=sharp&s=regular
  2. Change mailto:info@fiordlandexpeditions.co.nz to tel:+6432499005

Is that right?

https://orb-primrose-k7f8.squarespace.com/?noredirect

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan

Yes that's exactly right. Still haven't had any look giving that social link a tel: URL. It's default to adding http: at the start which breaks it.

The other 'nice to haves' are:
1. Icon colour reversing in Mobile menu as the background colour is white.
2. Only displaying the icon at mobile (this is less important).

Edited by Fluid
Link to comment
On 5/1/2023 at 7:35 AM, Fluid said:

Hi @tuanphan

Yes that's exactly right. Still haven't had any look giving that social link a tel: URL. It's default to adding http: at the start which breaks it.

The other 'nice to haves' are:
1. Icon colour reversing in Mobile menu as the background colour is white.
2. Only displaying the icon at mobile (this is less important).

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
  jQuery(document).ready(function($){
  $('header#header a.icon:nth-child(4)').attr('href','tel:+6432499005');
    $('<i class="fa-sharp fa-regular fa-phone"></i>').appendTo('header#header a.icon:nth-child(4)');
})
  </script>
<style>
  header#header a.icon:nth-child(4) svg {
  display: none;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/3/2023 at 9:44 AM, Fluid said:

Thanks @tuanphan

We're almost there - it did place something where the chain icon was, but the fontawesome icon appears to be broken for some reason. See the attached screenshot.

Screenshot 2023-05-03 at 2.40.46 PM.png

Can you keep these lines? We can test code easier

image.thumb.png.20b3db6543a1c50a96464304a05db146.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.