(Updated) How to use custom bullets points in Squarespace

March 2018: this post has been updated to the newest version of Font Awesome.

Adding bullet points to your site content is a simple way to make your text easier to follow, but adding custom bullet points can also help you infuse your text with your brand’s personality.

The good news is, you don’t have to make your own icons if you don’t want to – or don’t have time to do them – because there’s already an awesome resource out there that you can use: Font Awesome.

 

In this post, you’ll learn what Font Awesome is all about, how to “install” it on your Squarespace site and an easy method to use it to replace your bullet points.

 

Let’s jump right in!

 

Here's the full code:

HTML

<ul class="fa-ul customstyle">
  <li><i class="fas fa-star fa-li"></i>Create your HTML list</li>
  <li><i class="fas fa-star fa-li"></i>Add your Font Awesome icons as bullets</li>
  <li><i class="fas fa-star fa-li"></i>Style your new custom bullet points!</li>
</ul>

 

CSS

.customstyle .svg-inline--fa {
  color: green;
}

 

Tutorial

(Not enough time to read? No problem, skip to the important notes at the end)

 

What is it?

Font Awesome is an open source vectorized icon font that allows you to insert, style and customize icons on your website through code.

As of March 2018, their library contains 946 free icons within different categories, and you can use them all on your site without restriction.

 Font Awesome library.

How to install the icons?

Installing is a way to call what you have to do, but you aren’t really installing anything:

  1. Click on the Get Started tab.
  2. Look for the script next to "Use Font Awesome Free CDN" and copy it.
  3. In Squarespace go into Settings > Advanced > Code Injection and paste the script in the header.

Done!

 Adding Font Awesome to your Squarespace header section.

 

How to use them?

With your script embedded, you can now add the icons anywhere on your site by using a simple syntax that looks similar to this:

<i class="fas fa-icon"></i>

The <i> tag works like a <span> tag since it helps to style the specific content placed inside it; it’s normally used to set words in italics when there isn’t a more appropriate tag – like <em> – but in this case it’s used to add the Font Awesome icons since it’s shorter than <span>. You can read more about the <i> tag here.

 

As you can see in the snippet above there are two classes for the tag: fas and fa-icon.

The newest version uses 4 different main classes to classify their icons: fas (solid), fab (brands), far (regular) and fal (light).

The second class in the snippet above, fa-icon, involves the prefix fa- and the name of the icon you're using.

So looking through their icons list:

Envelope icon Font Awesome.png

 

If we wanted to add an envelope icon, the original snippet would go from this:

<i class="fas fa-icon"></i>

to this:

<i class="fas fa-envelope-open"></i>

 

However, you can always click through the icon you'd like to use and simply copy the code right below it!

Font Awesome envelope icon.png

 

How to create a list with them?

To create a list that includes your icon as bullet points, you’ll have to make your own list, using HTML. But don’t worry, it’s pretty straightforward!

Insert a code block where you want your list to go and begin constructing it like so:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
 Creating an unordered list in Squarespace.

The <ul> tag refers to an “unordered list”, aka a list with bullet points instead of numbers, and the <li> tags are where the list items will go.

 

Here’s what that looks like when you start adding information inside the <li> tags:

<ul>
  <li>Create your HTML list</li>
  <li>Add your Font Awesome icons as bullets</li>
  <li>Style your new custom bullet points!</li>
</ul>
 Creating an unordered list in Squarespace's code block.

 

Now, let’s add some icons. Simply add your <i> tags with its corresponding classes inside your <li> tag. We’ll be using the star icon that has a class of fa-star

<ul>
  <li><i class="fas fa-star"></i>Create your HTML list</li>
  <li><i class="fas fa-star"></i>Add your Font Awesome icons as bullets</li>
  <li><i class="fas fa-star"></i>Style your new custom bullet points!</li>
</ul>
 Adding Font Awesome in an unordered list.

 

Ok, the icons are there, but the spacing is wrong and the old bullets are still present so now it’s time to take care of that.

 

Font Awesome gives you a quick way to replace the default circular bullet points from your list by adding two additional classes to your HTML.

By adding a class of fa-ul to your <ul> tag and a class of fa-li to each of your <li> tags, your bullets get instantly placed where they should:

<ul class="fa-ul">
  <li><i class="fas fa-star fa-li"></i>Create your HTML list</li>
  <li><i class="fas fa-star fa-li"></i>Add your Font Awesome icons as bullets</li>
  <li><i class="fas fa-star fa-li"></i>Style your new custom bullet points!</li>
</ul>
 Adding Font Awesome bullet point classes.

Ta-da!

 

How to style them?

Now, the fun part.

It’s important to note that since these icons are basically a font, they’ll respond to the same CSS properties that a normal font does. In fact, they’ll initially take the same properties of your body text or heading (in terms of size and color) unless you change them.

 

So for example, in the code we used before the star is taking the properties assigned to the body text: dark gray color and 19px in size. However, if we were to wrap the <i> tag inside our h2 like so:

<h2><i class="fas fa-class"></i></h2>

The icon would now inherit the h2 properties (black color and 39px in size):

 An example of how Font Awesome inherits the styles of the content.

 

Going back to the our list, to customize the icons to your liking, before inserting any CSS, you first need to figure out what exactly you want to edit to know which selectors to target:

a) If you want to target ALL lists on your site that have Font Awesome icons, you can use .fa-li which refers to the class that only the icons that sit inside a list have. This code can be added in your Custom CSS window.
 

b) If you want to target a specific list or set of lists on your site, you can give your specific <ul> list a unique class (e.g. customstyle) so you can target it in your CSS injection window.

 

Once you have that set, you can start making the adjustments you want.

In the first case we can edit the icon’s color and size like so:

.fa-li {
  color: green;
  font-size: 25px;
}
 Adding styles to the custom CSS injection window in Squarespace.

 

If you rather have a way to target only the lists you want, you can go about it like this:

In your HTML, add an extra class to your ul tag. I'll be using customstyle

<ul class="fa-ul customstyle">
  <li><i class="fas fa-star fa-li"></i>Create your HTML list</li>
  <li><i class="fas fa-star fa-li"></i>Add your Font Awesome icons as bullets</li>
  <li><i class="fas fa-star fa-li"></i>Style your new custom bullet points!</li>
</ul>
 Adding a class to your unordered list.

 

And then add the corresponding selectors – for both your list (.customstyle) AND a class that selects only the icons which in this case can be .fa-li as before or .svg-inline--fa – to your Custom CSS window with the properties you want to alter:

.customstyle .fa-li {
  color: green;
}
 Adding CSS styles to the new custom class.
.customstyle .svg-inline--fa {
  color: green;
}
Changing Font Awesome bullet list icon color.png

 

Why those selectors?

If you're wondering why you can't use simply the new class you gave your bullet point list (.customstyle) that's because that class is being applied to everything inside that list, therefore if you don't indicate that you only want to alter the icon's color you'll end up with green text:

CSS for custom bullet list in Squarespace.png

 

And if you're wondering why I'm not using .fas but .svg-inline--fa  to target the icons, that's because Font Awesome's script replaces the HTML element you added (the one that had the .fas class) with a corresponding SVG element. That SVG element – aka the icon – has the class .svg-inline--fa as you can see here:

Customize Font Awesome icons with CSS.png

To keep in mind

  • When creating these custom bullet points, make sure to add the <i> tag inside the <li> to avoid formatting headaches.
     
  • If your icons aren't showing, make sure you followed the steps in this tutorial to add the new version of Font Awesome in your site's header (Settings > Advanced > Code Injection).

 

Until next time,
B.

 

LIKED THIS POST?

I'd love it if you shared!