Add Call-Icon to Social Media Icons

hi, I'm trying to add a icon to my header in the style of the social-media icons that "opens a call" to us. So like the mail-Icon, just with a telephone. is that possible?

the option with the huge button would not be my favorite design-wise. 

thanks already 😊

link: https://scarlet-clementine-rsng.squarespace.com/

PW: applaus

You can use a Link with generic icon, then we will use code to change it to Phone icon then.

What do you think?

yes sure, if that works - link is added!

oh and i forgot to add, the icon should preferably invert color like the rest of the icons! white on front-page, black on other pages. 

thanks already 🙂

On 11/20/2023 at 4:33 PM, CorinnaR said:

yes sure, if that works - link is added!

oh and i forgot to add, the icon should preferably invert color like the rest of the icons! white on front-page, black on other pages. 

thanks already 🙂

Try adding this code to Website > Website Tools > Custom CSS. I used an icon url on Google, you can replace with your icon, then we will check invert white/black color code

header#header [href*="tel"] svg {
    display: none;
}

header#header [href*="tel"]:after {
    content: "";
    background-image: url(https://png.pngtree.com/png-vector/20201028/ourmid/pngtree-phone-icon-in-solid-circle-png-image_2380227.jpg);
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
}

perfect - this worked. I switched it to my icon, which is black - so I would only need to switch it to white on the front-page. 

perfect, thank you so much! 😊