Replacing default Social Link icons in header (CSS)

Hey! 

I have social links turned on to appear in the header of a site I'm building. Is it possible to replace the svg images for each icon within the CSS? I just want to swap out the default squarespace images for my own design svgs. Nothing else!

I have gone through tutorials to create HTML social icons in the header code and then used CSS to position them - this doesn't work for my site as I have a border around the header and the icons are sitting in the wrong place outside of this border.

Any ideas?

4 hours ago, imlucyelliott said:

Hey! 

I have social links turned on to appear in the header of a site I'm building. Is it possible to replace the svg images for each icon within the CSS? I just want to swap out the default squarespace images for my own design svgs. Nothing else!

I have gone through tutorials to create HTML social icons in the header code and then used CSS to position them - this doesn't work for my site as I have a border around the header and the icons are sitting in the wrong place outside of this border.

Any ideas?

Can you share your site with the protected password to check it?

montibymonti.com 

Password: TUESDAYBANANA 

On 10/20/2021 at 5:37 PM, imlucyelliott said:

montibymonti.com 

Password: TUESDAYBANANA 

Add to Design > Custom CSS

/* header 3 icons */
header.Header .SocialLinks-inner a svg {
    display: none;
}
header.Header .SocialLinks-inner a {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: unset !important;
}
/* email */
header.Header .SocialLinks-inner a[href*="mailto"] {
    background-image: url(https://cdn.pixabay.com/photo/2019/06/08/21/32/castle-4261029__340.jpg);
}
/* instagram */
header.Header .SocialLinks-inner a[href*="instagram"] {
    background-image: url(https://cdn.pixabay.com/photo/2021/09/23/09/01/swan-6649194__340.jpg);
}
/* facebook */
header.Header .SocialLinks-inner a[href*="facebook"] {
    background-image: url(https://cdn.pixabay.com/photo/2021/09/27/13/06/stones-6660734__340.jpg);
}

wonderful  - works perfectly 🙂