How to Easily Add Custom Bullet Points to Your Squarespace Site
By Elliot Olson
Lead Web Designer + Digital Strategist
Looking to add some extra polish to your Squarespace website?
You’ve already created website brand guidelines.
You know how to add custom CSS to your Squarespace site.
Maybe you already added low text highlights to some text.
What’s next?
Here’s another easy to add extra polish in Squarespace — custom bullet points.
Bullet points are great for breaking up text flow and attracting visitor attention.
But sometimes the standard bullet point is just a little…ho-hum.
Instead of settling for the normal bullet point, you can add extra style and customization with bullet points like…
⚘ Flowers for a flower shop ? Dollar signs for a finance blogger ✓ Checkmarks for a professional organizer ★ You get the idea!
Today, you’ll learn how to use easily add custom bullet points to your Squarespace site. And there’s even an advanced option…uploading custom images to use for bullet points. And now, without further adieu… Here are two easy ways to add custom bullet points in Squarespace.How to Add Custom Bullet Points to Squarespace
For both of these methods, you’ll need to access the Custom CSS section of your Squarespace site. If this is your first time encountering Squarespace CSS, you may be thinking… Wait a minute. CSS whatnow? In that case, read this first: START HERE ? Intro to Adding Custom Styles in Squarespace Here’s a quick refresher on CSS.Getting Started with Squarespace CSS
Your Squarespace website comes in two parts: HTML is the content of the site — the text, images, links, etc. CSS is the style of the site — the fonts, colors, and layout. So basically, your CSS sets the style of your HTML content. To add custom bullet points to your site, we’re going to add custom style rules in the Design >> Custom CSS section of your Squarespace site. First up, let’s talk about using Unicode to add custom bullet points.Method 1 — Unicode
First off, a quick definition. Unicode is a standard system to display written characters and symbols. Cool, sounds super boring. Don’t tune out just yet. Unicode is wayyyy important — and the key to snagging customizable symbols to use for your Squarespace site. Here is the written process for using Unicode to add custom bullet points to your Squarespace site. Before adding the CSS, you have this normal bullet point…
Copy and paste this code into the Custom CSS section of your Squarespace site.
ul[data-rte-list] li>*:first-child::before {
content: “2794”;
font-weight: 400;
color: #148C80;
}
Now you have these bullet points!
To find other bullet points, here’s a helpful website with TONS of unicode symbols.
Once you find a symbol you like, just replace 2794 with the new Unicode.
For example, the Unicode for ✓ is 2713.
You’ll paste 2713 into the CSS so it reads like so:
ul[data-rte-list] li>*:first-child::before {
content: “2713”;
font-weight: 800;
color: #148C80;
}
And voila! Your bullet points are now formatted like this:
You can also adjust the color of the Unicode to reflect the branding of your site.
Just replace #148C80 with whatever color you want instead.
(Psst…wondering how to find custom colors for your site? Or where to convert those colors into read-able website codes? Check out the colors section in Creating Easy & Elegant Website Brand Guidelines.)
Ok, so now you’ve unlocked Unicode. Way to go!
Next up is another fun customization option…using emoji for bullet points.
Method 2 — Emoji
Emoji also use Unicode. So in addition to standard symbols like ✯‣❧, you can also use emoji like ??? as your bullet points. For example, here’s the code to use the rainbow emoji as your bullet point. ul[data-rte-list] li>*:first-child::before { content: “1F308”; } Ta-da!
The same as with Unicode, you can snag all the emoji code online. Here’s a site to start you off!
