How to Use Custom Bullets on Your Squarespace Website
When creating your product pages, sales pages or even you blog posts, using bulleted lists can be a great way to display information (especially when there’s a lot of it!).
Unfortunately, the text editor in the Squarespace text block doesn’t allow for a lot of creativity - you get the standard numbered and bullet lists only:
just as boring
You get my point.
To make your lists a little more fun or to make them look branded (if there are specific symbols you like using in your brand - e.g. stars, hearts, rockets), you can use this cool trick I’ll teach you.
It’s called FontAwesome. And it’s awesome, indeed. Oh and did I mention - it’s also FREE.
Here is how to add FontAwesome it and start using custom bullets on your Squarespace Website:
Step 1. Grab code snippet
Go to Font Awesome’s website and copy the code snippet on their homepage. Alternatively, you can copy it from here:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
Copied? Good, then proceed to
Step 2. Add code to your Squarespace website
At this point, you have two options:
Be able to use FontAwesome bullets/icons on your entire website
Use FontAwesome bullets/icons on a single page
Depending on what it is you need, follow the steps below:
OPTION 1: USE FONTAWESOME ON YOUR ENTIRE WEBSITE
Login to your Squarespace website and go to Settings > Advanced > Code Injection. In the section labeled “Header” paste the code snippet you copied previously. It should look something like this:
Voila! Now you should be able to use custom bullets on any page on your website.
OPTION 2: USE FONTAWESOME ON JUST A SINGLE PAGE
Login to your Squarespace website and go to Pages, then select the specific page where you want to use custom bullets. Click the Settings icon next to its title:
and in the section labeled Page Header Code Injection paste the code snippet you previously copied. It should look something like this:
FontAwesome will now be available on this page only. This means that if you want it to be available on additional pages, you will need to repeat the above steps for each page.
Step 3. Using FontAwesome in the text on your pages
Almost done! Now, to be able to display the FontAwesome bullets, you will need to use the Code Block. Here’s how:
Go to the page where you want to use custom bullets and click Edit.
Insert a new Code Block by clicking on the insert marker and choosing Code from the menu:
In the window that appears, copy and paste the following code:
<span class="fa fa-star"></span>
When you click Apply, you should be able to see the star icon appear like this:
Cool, huh? :) You can proceed to add any icon your heart desires, by simply changing the text in the Code block that appears after the fa fa- to the individual title of the desired icon. The full list of searchable FontAwesome icons can be found here: Font Awesome Icon Gallery
And there you have it - now you can spruce up your bulleted lists and make awesome looking pages in Squarespace.
GOT ANY QUESTIONS?
Pop them in the comment box below and let’s get the conversation started!