Jump to content

Inserting custom call icon into header button on Squarespace 7.1

Recommended Posts

Site URL: https://echd-v2.squarespace.com/

Hi all

I'm nearly finished developing this website, but the client has one final tricky request: I need to add a call icon to the header button

https://echd-v2.squarespace.com/
password: echd


I read recently that the old font awesome hacks/loopholes I used to achieve these things with has been closed, and that Jquery is the only way now

This is a bit outside my comfort zone – is anyone able to point me in the right direction?

Thanks
James

Link to comment
  • Replies 2
  • Views 533
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

First, add FontAwesome link into Settings > Advanced > Code Injection > Header

<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" />

Next, add this code to Design > Custom CSS

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

Screenshot_10.thumb.png.039172af3f1e75dacd3a6127290af266.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.