Jump to content

Need help with adding an icon to the button displayed on the header

Go to solution Solved by tuanphan,

Recommended Posts

Hi, if someone could please guide me on how to add a phone icon before the number in the button of the header that would be greatly appreciated. 

 

  1. Website URL:
    https://www.melbrosplumbing.com.au/
  2. Screenshots:
    Below is a screenshot of where I would like to add the phone icon on the header button.
    image.thumb.png.c4db3490a9c55d80b992469c8eeb209c.png

    I also don't seem to have Custom Files under the CSS Editor (I am on the business plan) that might help me with this...unless there is some other way I can do this

    Thanks in advance! 
Link to comment
  • Solution

(1) First, use this code to Website > Website Tools > Code Injection > Header (this is FontAwesome icon)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Add Phone Icon Before Header Button 01 Min

(2) Next, use this code to Website Tools > Custom CSS

a.btn:before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
}

Add Phone Icon Before Header Button 02 Min

(3) Result (on my test site)

Add Phone Icon Before Header Button 03 Min

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

Does this dial the number with the phone icon button is clicked?   

Is there a way (code, block or integration) to activate a phone call  by clicking on a button or text box with the number either displayed or hidden.

Link to comment
12 minutes ago, glshuman said:

Does this dial the number with the phone icon button is clicked?   

Is there a way (code, block or integration) to activate a phone call  by clicking on a button or text box with the number either displayed or hidden.

There are two questions here.

The phone icon discussed previously is just a visual element added with some CSS to help the site visitor to know they are clicking on a link that can dial a phone number.

Almost any place in Squarespace where you can add a link or URL, you can use a URL of the format

tel:+1234567890

What happens on a user's browser when a telephone URL is clicked depends on the browser and how the operating system is set up. That part is out of the site's/your control.

On a mobile device like a smartphone almost certainly things have been configured to launch your phone app to make the call.

On a computer it's probably a bit more uncertain what might happen. It could be nothing to an app launches to handle the call.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.