How to customise bullet points with symbols or emojis in Squarespace

May 25

This tutorial is the second part of how to customise bullet points on your website.

You can read part 1 of this tutorial here - How to customise bullet points with an image in Squarespace

This method uses a unicode character or symbol. This is much easier and quicker. 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

In this example, you can, use almost any character you like. A great resource can be found here.
Below is a table of some use codes.

	
		Name
		Symbol
		Code
	
		Arrow
		➔
		\2794
	
		Star
		★
		\2605
	
		Circled Bullet
		⦿
		\29BF
	
		Check Mark
		✓
		\2713

Name	Symbol	Code
Arrow	➔	\2794
Star	★	\2605
Circled Bullet	⦿	\29BF
Check Mark	✓	\2713

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;
  /* Set dimensions and color */
  font-size:17px;
  color:#c40cf9;
}

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;
  /* Set dimensions and color */
  font-size:17px;
  color:#c40cf9;
}

Step 1

Option 1

For this example we will add the css code of the Unordered Lists.

Also add the code you wish to use between content:” ”; In this example we will be using content:”\2605”;

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: "\2605" !important;
  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;
}

Step 2

Option 2

We can repliacte the example used in Step 1, however in this case we will use the star for symbol and replace ‘\2605’ with the star symbol ★.

/* 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;
  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;
}

Step 3

Using an emoji as a bullet point

Simply copy the emoji of interest and paste within the between content:” ”; In this case we are using this emoji 🫵. You can checkout more at getemoji

/* 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;
  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;
}

Step 4

If you need to change the size and colour of the bullet point, you need to adjust the font-size and color values.

  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;

Step 5

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

The css used so far applies to entire website. If you use the Chrome Extension quarespace ID Finder to identify where you wish to apply the css code, you can apply the css to a specific page, section or block.

Use this code on a specific page

#collection-id {
/* 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;
  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;
}
}

Use this code on a specfic section

section[data-section-id="#"] {
/* 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;
  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;
}
}

Use this code on a specfic block

#blockidnumber {
/* 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;
  /* Set dimensions and colour */
  font-size:17px;
  color:#c40cf9;
}
}

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

Book Your Quick Help Virtual Call