Adding a whats app link in social link block

Hello all,

I'm adding the code below into my settings/advanced/custom CSS/footer, but the Whats App icon is not showing on my social block. What am I doing wrong?

/* Add me to Code Injection (Footer) to get whats app logos for whatsapp links*/
footer.sections [href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
footer.sections [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

The website is: https://backend-oselka.squarespace.com/contato
Password: Oselka2022

Can you help me?

TIA!

57 minutes ago, cristinabarata said:

settings/advanced/custom CSS/footer

This sort of sounds like you are adding this code to the Footer Code Injection, it isn't formatted correctly for Code Injection, have you tried adding it to Design -> Custom CSS?

Hi Ziggy,

Just added the code to design/custom css but it's still not working...

Can you give me a hand?

Sure, you could try adding the code to the code injection footer, placed within <style></style> tags.

Where did you get the code?

Still not working.. and now it's showing an error message:

/* Add me to Code Injection (Footer) to get whats app logos for whatsapp links*/
<style>footer.sections [href*="wa.me"] {
visibility: hidden; 
position: relative;
}

footer.sections [href*="wa.me"]:before {
visibility: visible; 
content: "\f232";
font-family: FontAwesome;
position: absolute; top: 50%;left: 50%;
transform: translate(-50%,-50%);
}
</style>

Did you add this to the Settings -> Advanced -> Code Injection -> Footer with the <style> tags?

nope. You asked me to add the <style> tags to design / custom css

But nothing happened.

4 hours ago, Ziggy said:

try adding the code to the code injection footer, placed within <style></style> tags

I found a way!!!!!