How to customise bullet points with an image in Squarespace

This tutorial will show you how to customise bullet points on your website. This will work for Squarespace 7.1

Are you looking to personalize your Squarespace website?

Modifying bullet point and numbered list icons is a quick and easy way to make your site stand out while staying true to your brand. With just a small piece of code, you can use an image like your logo or any symbol or emoji to create custom bullet points. Plus, you can apply these changes to numbered lists as well. The possibilities are endless, so let your creativity run wild!

But before you get started, it's helpful to know the difference between ordered and unordered lists. In Squarespace, numbered lists are considered "ordered" because the numbers establish a sequence, while bullet points are considered "unordered." This distinction matters when using CSS to target specific lists. To change your bullet points, use "ul" in your CSS code. To modify your numbered list, including changing the font or color, begin your snippet with "ol."

Complexity: Easy

The two codes below effectively remove the default number or bullet point symbol.

Bullet Points aka Unordered Lists (UL)

/* Add bullet point image to first child element of an li element under a ul element with data-rte-list attribute */
ul[data-rte-list] li > *:first-child::before {
  /* Set the bullet point image as the background image */
  content: " " !important;
  background-image: url('');
  /* Center the image and set its dimensions */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 30px;
  width: 30px;
}

Number Lists aka Ordered Lists (OL)

/* Add bullet point image to first child element of an li element under a ul element with data-rte-list attribute */
ol[data-rte-list] li > *:first-child::before {
  /* Set the bullet point image as the background image */
  content: " " !important;
  background-image: url('');
  /* Center the image and set its dimensions */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 30px;
  width: 30px;
}

---

Step 1

First thing we need to do is upload your image/icon onto squarespace.

From the Squarespace dashboard navigate to: Design > Custom CSS and at the bottom click on the 'MANAGE CUSTOM FILES' button and then click on the 'Add image or font' button to upload your image/icon.

A good bullet point image is:

• High defination at small sizes

• 30px x 30px in size

• Transparent background

---

Step 2

For this example we will add the css code of the Unordered Lists. Simply go to ‘Design’ and the ‘Custom CSS’, paste the code into the Custom CSS editor box.

/* Add bullet point image to first child element of an li element under a ul element with data-rte-list attribute */
ul[data-rte-list] li > *:first-child::before {
  /* Set the bullet point image as the background image */
  content: " " !important;
  background-image: url('');
  /* Center the image and set its dimensions */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 30px;
  width: 30px;
}

---

Step 3

Assign image/icon to link.

To do this place your cursor in between ' ' in background-image: url (' '); line.

Then click the ‘MANAGE CUSTOM FILES’ to show the image/icon, lastly click on the image/icon to be assigned to the link once.

---

You can also look at our “How to add an gradient background” blog.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.