How to Add Custom List Bullets to Spruce Up Your Website

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. If you want to check how to further customize your new list bullets, read this other post.

 

Let’s jump right in!

How to add custom bullet points to your website lists in Squarespace.

 

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 May 2017, their library contains 675 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.

By clicking on the Get Started tab on their page, the first thing you’ll see is a field to enter your email. That’s where they’ll send you the code you need to embed on your site’s header to add the font.

You’ll get an email like the one below with your personal code snippet and instructions on how to add it.

Installing Font Awesome on your site with the script from your email.

To insert it into your site’s header, just go to Settings > Advanced > Code Injection and paste the snippet from your email into the Header section.

Adding Font Awesome to your Squarespace header section.

I recommend you also click on the Register Your Font Awesome CDN Account button on your email so you can create an account for your embed code. This will allow you to change some useful settings without having to tweak the actual script.

Once you create your account you’ll see a dashboard like this:

Font Awesome dashboard when you register your CDN.

And by clicking on Edit Options you’ll be able to:

  • Add a name to your code – in case you manage multiple sites that have Font Awesome or to remember on which site you embedded the code in.
  • Switch to the newest version of the font when they update it.
  • Apply accessibility best practices – which improves the user experience for people using a screen reader.
  • Apply asynchronous loading – to stop your icons from slowing your page load.
Changing the options of your Font Awesome script.

 

How to use them?

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

<i class="fa 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: fa and fa-icon.

The first class (fa) is used for all the Font Awesome icons, while the second one (fa-icon) involves the prefix fa- and a placeholder for the specific name of the icon you want to use. For example, if you go to the Icons tab in their site you’ll see some of the icons have just one word as their name while others have something like envelope-open-o:

Checking out the names of the icons on Font Awesome's site.

That’s because those are the code names – no pun intended – which you’ll want to add after the prefix fa- (in fa-icon) to insert the icon in your site.

 

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

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

to this:

<i class="fa fa-envelope-open-o"></i>
Adding a Font Awesome icon in a Squarespace code block.

And that’s basically it.

 

Note: You can also click on the icon you want to use and copy/paste the code they give you.

 

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="fa fa-star"></i>Create your HTML list</li>
<li><i class="fa fa-star"></i>Add your Font Awesome icons as bullets</li>
<li><i class="fa 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.

There are two ways to do it; in this post you’ll see the easier way, and on this post you can check out a more advanced method.

 

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="fa fa-star fa-li"></i>Create your HTML list</li>
<li><i class="fa fa-star fa-li"></i>Add your Font Awesome icons as bullets</li>
<li><i class="fa 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: gray color and 19px in size. However, if we were to wrap the <i> tag inside our h2 like so:

<h2><i class="fa 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 on your CSS injection window. Why not target .fa instead? Because it would alter Font Awesome icons you have elsewhere on your site regardless of if they’re part of a list or not.
 

b) If you want to target all the lists on ONE page of your site and not anywhere else, you can use the same selector as before (.fa-li) but inside your code block, not the CSS injection window. This way you make sure no other list with FA icons in your site gets altered. You can also give your specific <ul> list a unique class (e.g. .customstyle) so you can later 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.

And in the second case, we can do the same thing like this:

<style>
 .fa-li {
color: green;
font-size: 25px;
 }
</style>
Adding custom CSS styles inside a code block in Squarespace.

Or if you rather create the new unique class for your <ul>, you can go about it like this:

In your HTML, add the extra class to your ul tag

<ul class="fa-ul customstyle">
<li><i class="fa fa-star fa-li"></i>Create your HTML list</li>
<li><i class="fa fa-star fa-li"></i>Add your Font Awesome icons as bullets</li>
<li><i class="fa 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 selector (.customstyle) to your CSS injection window with the properties you want to alter:

.customstyle .fa{
color: green;
}

Notice how in this case you need to use the .fa as well to target the only the icons, otherwise your text would get customized too.

Adding CSS styles to the new custom class.

TO KEEP IN MIND

  • When creating these custom bullet points, make sure to add the <i> tag inside the <li> to avoid formatting headaches.
  • When adding CSS snippets to your code blocks, remember you have to add your customizations inside <style> tags. When adding them to the CSS injection window you must not add them.

Those are the basics of adding and styling icons as bullet points to your site, but if you’re looking to take it one step further and customize them even more make sure to check this other blog post where you’ll learn to override the styles that come with the fa-li class and how to replace the bullets without it.

 

Until next time,
B.


DON'T FORGET YOUR CHEATSHEET!

You can find out more about the properties used in this tutorial, through the online CSS cheatsheet

TAKE A LOOK NOW
How to use Font Awesome to create bullet points on your site, to spruce up your content