Inserting custom call icon into header button on Squarespace 7.1

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

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;
}

Thanks so much that worked!