Replace Social Icons in the Header | Squarespace 7.1
Adding Social Icons in your Header is a great way to advertise the platforms that you are active on and build your audience. Squarespace can recognise several different platforms and can automatically add the logo for those platforms to you header.
You can see a list of which platforms are supported here.
However, when you are using a platform that is not supported, Squarespace will show a link icon instead. In this video, I show you how to replace a social icon in the header with an image or logo of your choosing.
All of the code used in the video is provided below.
The following code is used in the video.
(This code has been updated since the video was recorded.)
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(1) {
svg {
display:none;
}
background-image: url(IMAGEURL);
background-size: 100%;
background-repeat: no-repeat;
}
}
.header-menu-actions-action:nth-of-type(1) {
svg {
display:none;
}
background-image: url(IMAGEURL);
background-size: 100%;
background-repeat: no-repeat;
}