How to Add Custom Bullet Points to Squarespace
There are subtle things that you can incorporate into your website design that can take a ho-hum design into something that looks seriously legit. Did you know that in Squarespace, you have the ability to customize your bullet points using unicode or your own images/icons.
Through this post we are going to walk you through the two different types of bullet points you can create using custom CSS. The process is pretty simple, so follow along to learn how to add custom bullet points to your Squarespace site!
Using Unicode for Your Bullet Points
Unicode offers various symbols and icons that you may already be familiar with through previous projects, but they have a wide library of options to choose from. For the sake of this tutorial we will be walking through how to use the unicode character “+” as a bullet point. You can see more about this character and search for one of your own you like through this website.
The main thing you will need no matter what character you use is the Unicode character number. This is what you will add into the CSS code. 002B is this particular unicode character’s number.
After you select your character, open up your Custom CSS panel. You can access this window through the Design > Custom CSS. Then copy and paste the Custom CSS code below (be sure to replace the content (“\002B”) with your new unicode code).
ul[data-rte-list] li>*:first-child::before { content: "\002B"; font-weight: 400; }
Select Save and then you are good to go! See our bullets in action below.
An example of a custom bullet point
Add your own bullet to your website today!
Using a Custom Image for Your Bullet Points
Another option for your bullet design is to upload a custom image. This is a great option if your brand has a unique mark or icon that you think will work well in your website design, blog posts, etc.
Resources such as Font Awesome and Flaticon are great places to find images if you don’t already have an icon in mind from your branded materials. Select an icon that is pretty simple in design, especially since it will be scaled quite small.
Upload your desired image under Design > Custom CSS > Open in Window > Manage Custom Files. Note that your image must be pre-sized before your upload. We recommend a max 10px height for your image. This prevents having huge bullet points and keeps things proportionate. Upload your image to the side panel in your Custom CSS window.
From here, add in the code below:
ul[data-rte-list] li>*:first-child::before { content: url(https://your-site-url/your-image-url.png); }
After you have added in this code, highlight the URL portion and delete the text. Keeping your cursor in the same spot, select your custom image in the side panel. This will auto-populate your image url. Select Save. See below of an example of our “star” bullet points in action.
Note that you can only use a unicode character OR a custom image when it comes to these two different bullet styles! Due to your specific code you are unable to use both styles. So test out which one works best for you and your website design.
Comment below a webpage where you have your custom bullet points on display, we can’t wait to check it out!
You might also like…