Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
harriethoult

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

Question

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.

 

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
  • 0

Hi @harriethoult

Unfortunately, the workaround I use in Squarespace 7.0 with FontAwesome to get icons in the header no longer works in 7.1. 😞

Maybe someone else has another idea for you!

Share this post


Link to post
  • 0
Posted (edited)

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

You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...