How to Customize Your List Bullet Points With CSS

If you read this post on adding custom bullet points to your site, you already know what is Font Awesome, how to embed it on your site and how to use it.

If not, I recommend you read that first before continuing because here we’ll be diving right into how to override the .fa-li styles to create a customized look for your bullets and how to create the bullet points from scratch.

Let’s go!

How to customize your Font Awesome icons to create bullet points.

 

Overriding Font Awesome bullet point styles

In a previous post, we used two special classes from FA to make it easier to replace our default bullet points without much code: fa-ul and fa-li.

The resulting snippet looked like this:

<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>

Now, you saw how to edit the color and size of those star icons but what if you wanted to customize it even more and add a background, for example, a circular background to be precise.

Seems simple enough, by adding the background-color property to the .fa-li selector you should be off to a good start but...

.fa-li {
 background-color: green;
}
Adding a background to Font Awesome icons.

It looks like there’s some sort of padding on the sides of the icon that extends the background but no biggie, you can simply add the same amount of padding to the top and to the bottom:

.fa-li {
 background-color: green;
 padding-top: 10px;
 padding-bottom: 10px;
}
Adding padding to a Font Awesome icon background.

And then, of course, some margin in between the li items found inside the .fa-ul list:

.fa-ul li{
 margin-bottom: 10px;
}
Separating icons with a margin.

But now, I’m guessing you see a couple of issues too: 1, the size of the icon is kinda large even when adding a border-radius property of 30px (below) and 2, the icons now seem to be unaligned with the text.

Adding border radius to create a circle.

The problem lies within the properties that already exist within the .fa-li class so we’ll need to override a few.

 

First, the icons are set with a position absolute but we need them with position relative to fix the alignment issue easily:

.fa-li {
 background-color: green;
 padding-top: 10px;
 padding-bottom: 10px;
 border-radius: 30px;
 position: relative;
}
Adding position relative to the icons.

Now, they’re way too far from the text, so we have to bring that margin in, -30px seems to do the trick here:

.fa-li {
 background-color: green;
 padding-top: 10px;
 padding-bottom: 10px;
 border-radius: 30px;
 position: relative;
 margin-right: -30px;
}
Adding a negative margin to the icons.

Looking better already!

 

Now, for the size of the background the problem is that there’s no padding on the sides to override, the size of the box is due to the width property. So, a simple way to shrink it back to the size of the actual icon is to add a width of auto:

.fa-li {
 background-color: green;
 padding-top: 10px;
 padding-bottom: 10px;
 border-radius: 30px;
 position: relative;
 margin-right: -30px;
 width: auto;
}
Adding a width of auto to remove extra spacing.

As you can see, the previous padding we added on top and bottom remains, but now there’s nothing on the sides, and if we remove our padding we can se the resulting box that surrounds the icon:

.fa-li {
 background-color: green;
 border-radius: 30px;
 position: relative;
 margin-right: -30px;
 width: auto;
}
Removing the extra padding from the icons.

We can now add a simple padding property with whichever value we like, in this case we’ll make it 5px

.fa-li {
 background-color: green;
 border-radius: 30px;
 position: relative;
 margin-right: -30px;
 width: auto;
 padding: 5px;
}
Adding new padding to the icons.

Much better!

 

Here’s what it looks like when changing the star color:

.fa-li {
 background-color: green;
 border-radius: 30px;
 position: relative;
 margin-right: -30px;
 width: auto;
 padding: 5px;
 color: lightgreen;
}
Changing the color of the Font Awesome icon.

 

Creating custom bullet points from scratch

If for whatever reason you don’t want to use the .fa-li and .fa-ul classes or you just want to learn how to add the bullet points yourself then here’s how.

First, you need to create your unordered list inside a code block – as in the previous post – and add your Font Awesome icons inside each <li> tag. This time we’ll use a different icon to compare it to the override method:

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

As you can see, the default bullet points are still there and the arrows are too close to the text, so it’s time to fix that.

 

To make it easier, we’ll add a unique class to our list to be able to style it through the CSS injection window. It will be called arrowlist

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

First, we’ll remove the circular bullets by using the list-style-type property and setting it to none.

.arrowlist {
 list-style-type: none;
}
Removing the default bullet points from a list.

We’ll also remove the 40px padding – as shown in the corner of the inspect element window – that’s on the left side just to match it to the format of the previous list.

.arrowlist {
 list-style-type: none;
 padding-left: 0px;
}
Checking for padding size on Inspect Element.
Removing the padding in front of the bullet points.

Good. Now it’s time to style the arrow icons.

To do that, we can’t use the .arrowlist selector alone since that refers to the list as a whole, we have to indicate that we want the icons inside that .arrowlist by adding the .fa selector. Remember all Font Awesome icons have the class fa so that’s an easy way to target them.

 

First, let’s check that the bounding box around the arrow doesn’t have any extra space. Adding a background color will help us see that.

.arrowlist .fa {
 background-color: pink;
}
Adding a background color to Font Awesome icons.

Awesome! No problems there. Let’s add some padding and make it into a circle with border-radius:

.arrowlist .fa {
 background-color: pink;
 padding: 5px;
 border-radius: 30px;
}
Creating a circular background for Font Awesome icons.

If you have an ounce of perfectionism in you, you’ll notice that’s not perfectly round. Why? You might be wondering, If you added the same padding all around.

Well, because the arrow box itself is not a square.

 

An easy way to fix that is to know that a) your icon starting point is your body font, and b) the height of your icon is set by the height/size of that font. In this case it’s 19px, so by adding a width of 19px you’ll get a perfect square, thus a perfect circle.

However, I wouldn’t recommend adding the width in pixels but in ems, since if you ever decide to alter your body text size you’ll end up with the same problem again. Instead, make the width of 1em so it changes accordingly if you decide to go with a smaller or bigger body font in the future.

.arrowlist .fa {
 background-color: pink;
 padding: 5px;
 border-radius: 30px;
 margin-right: 10px;
 width: 1em;
}
Modifying your icons' width.

Great! That’s perfectly round now but off center. A simple text-align will do:

.arrowlist .fa {
 background-color: pink;
 padding: 5px;
 border-radius: 30px;
 width: 1em;
 text-align: center;
}
Aligning the icons to the center of the background.

Now, some margin on the right side to separate it from the text:

.arrowlist .fa {
 background-color: pink;
 padding: 5px;
 border-radius: 30px;
 width: 1em;
 text-align: center;
 margin-right: 10px;
}
Adding a margin to the bullet points.

And lastly, a bit of margin on the bottom of each <li> so it resembles the previous starred list.

However, since this time you’re targeting each line, you can’t use the .fa selector since that’s only for the icons, you have to use the li selector instead:

.arrowlist li {
 margin-bottom: 10px;
}
Adding separation to an unordered list lines.

That’s it!

 

TO KEEP IN MIND

  • When using the border-radius property to make a circle, remember to make the value larger than the side of your square.
  • The 1em tip applies when your icons have the same initial style as your body font, if you use the icons under a h2 or h3 you’ll have to calculate the ems or use the exact pixel size.

I hope you are now ready to create your own customized lists to infuse your personality into your website!

 

Until next time,
B.


STYLE YOUR BULLETS EVEN FURTHER!

Check out the exclusive online cheatsheet to learn about even more CSS properties and how to use them

I WANT THAT CHEATSHEET
Take a look at how you can add color and style to your Font Awesome icons with a bit of custom code