How to Customize Bullet Points on SquareSpace using CSS

Are you looking for a way to make your Squarespace website stand out? One way to do this is by using custom bullet points. Instead of the plain old circles or squares, you can use any symbol you like from a vast Unicode symbol library. In this tutorial, we'll show you how to use Unicode characters as custom bullet points on your Squarespace website.

Step 1: Choose Your Symbol and Find Its CSS Code

The first step is to choose a symbol you like and find its CSS code. You can use any Unicode symbol, such as stars, arrows, hearts, or even animals. To find the CSS code, you can check out one of the many Unicode and emoji libraries on the internet, like this one. The CSS code of a symbol will be mentioned separately (like in our example picture.)

Step 2: Swap the CSS Code in the Snippet

Once you've found the CSS code for your symbol, you can swap it in the following CSS snippet:

//custom bullet points//

ul[data-rte-list] li>*:first-child::before {
content: "\2731" !important;
font-weight: 400;
color: #00000;
}

In this example, we've used the Unicode code for a star symbol. Swap \2731 with the CSS code of your symbol. You can also recolor your bullet points by changing the HEX code of the color in the snippet. Increase the font-weight value to make your symbol look heavier.

Step 3: Insert the Snippet in Custom CSS

Now, insert the above CSS snippet in the Design > Custom CSS section of your Squarespace website and click Save.

Congratulations! You've successfully used Unicode characters as custom bullet points on your Squarespace website. You can use this technique to give your website a unique and personalized touch. Don't stop here, explore other tutorials on our blog for more web design help to make your website look and function its absolute best.

Like always, if you have any questions, feel free to reach out!