Jump to content

Change 'Contact Us' button to clickable telephone icon / number

Recommended Posts

Site URL: https://badger-wisteria-g5yn.squarespace.com/

Hi there,
I have just started working on this site for a client: https://badger-wisteria-g5yn.squarespace.com/ and I want to change the 'contact us' button on the top right to a clickable - telephone icon & telephone number.  
It would be great if anyone could advise what css coding I can use to achieve this?
Please note the site is very much in the beginning stages of development! 
Any thoughts would be much appreciated. 
Many thanks.

 

Link to comment
Private Site
This site is currently private. If you’re the owner or contributor,
and which plan will you use: Personal or Business?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi @harriethoult, the answer somewhat depends on the template you are using. If you go into Settings > Site Availability you can set the site to Password Protected and share the password with us. Then someone may be able to help.

Link to comment

To change button link to telephone, add this to Home > Settings > Advanced > Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".theme-btn--primary-inverse").attr("href", "tel:0123456789");
});
</script>

To change to telephone icon, add this to Home > Design > Custom CSS

.theme-btn--primary-inverse {
    background-image: url(https://static.thenounproject.com/png/3158715-200.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
    padding-left: 5px;
    padding-right: 5px;
}

image.thumb.png.c59469c9316e1510f857ad325b3023f8.png

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.