How to Use Custom Bullets on Your Squarespace Website

 
How to Use Custom Bullets on Your Squarespace Website.jpg
 
 
 

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:

 
  1. boring

  2. boring

  3. still boring

  • just as boring

  • see above

  • see above

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:

  1. Be able to use FontAwesome bullets/icons on your entire website

  2. 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:

How to use custom bullets in Squarespace.PNG

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:

How to use custom bullets on single page in Squarespace.PNG

and in the section labeled Page Header Code Injection paste the code snippet you previously copied. It should look something like this:

How to use custom bullets on a single page in Squarespace.PNG

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:

Inserting Custom Bullets with FontAwesome.png
  • 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!