Custom Social Icons

What does this code do?

This code snippet will allow you to change social icons in the header and social blocks to images of your choice.

Prepare Your Image

The first step is to prepare the image you would like to use as the social icon. This works best if the image is square with a transparent background.

Upload this file to Design > Custom CSS > Manage Custom Files.

Code Snippets

Social Icons in the Header (Squarespace 7.1)

Copy and paste this code into Design > Custom CSS

/* Header Icons */
@media only screen and (min-width:640px) {
  .icon--fill:nth-of-type(1) {
    svg {
      display: none;
    }

    background-image: url(IMAGEURL);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

/* Mobile Header Icon */
.header-menu-actions-action:nth-of-type(1) {
  svg {
    display: none;
  }

  background-image: url(IMAGEURL);
  background-size: 100%;
  background-repeat: no-repeat;
}

Then delete the word IMAGEURL. Place your cursor between the brackets and click on the image you uploaded to Manage Custom Files. This will insert the image’s url in between the brackets. Repeat this for both IMAGEURLs.

Then change the “ 1 “ to “ 2 “, or “ 3 “, etc to the icon you want to customise.

Social Icons in a Social Block (Squarespace 7.0 & 7.1)

Copy and paste this code into Design > Custom CSS

/* Social Block Icons */
.sqs-svg-icon--list a:nth-of-type(1) {
  svg {
    display: none;
  }

  background-image: url(IMAGEURL);
  background-size: 100%;
  background-repeat: no-repeat;
}

Then delete the word IMAGEURL. Place your cursor between the brackets and click on the image you uploaded to Manage Custom Files. This will insert the image’s url in between the brackets.

Then change the “ 1 “ to “ 2 “, or “ 3 “, etc to the icon you want to customise.

How To Use It

1. Prepare your custom image and upload it to Manage Custom Files

2. Copy and paste the code as indicated above.

3. Delete the word IMAGEURL. Place your cursor between the brackets and click on the image you uploaded to Manage Custom Files.

4. Change the “ 1 “ to “ 2 “, or “ 3 “, etc to the icon you want to customise.