Change bullet point color and shape with CSS - Style list bullets tutorial

So, you used all available CSS properties to style your HTML list, but still not satisfied? A final touch to style your unordered list could be to change bullet points color, or even change the bullet point shape. Furthermore, you could replace your list bullet with an image or a Font Awesome icon. Let’s get on with styling HTML lists with CSS to perfection.

Change bullet point color CSS workaround

At the present moment there’s no CSS property to directly change HTML list bullet points color. Therefore, we have to use a workaround that includes a couple of CSS properties. The first thing to do is remove the default bullet points since they can’t be styled. So we are setting the list’s list-style property value to none.Now it’s needed to add an Unicode bullet point to before the list item using the li::before selector. We’ll set it’s content value to “\2022” which is the Unicode code for a bullet point.

The list bullet points are now ready to style. We’ll define the bullet point color by adding the color property to the li::before selector. Additionaly, we can set more properties for the bullet point such as font weight, margins, paddings or vertical alignment to name a few.

Here is an example of CSS code to change the bullet point color, tweak it as you like:


ul { list-style: none; } /* Remove default bullets */

li::before {
    content: "\2022"; /* Unicode bullet symbol */
    color: blue;  /* Bullet color */
	
	/* Optional tweaks */
    font-weight: bold;
    padding-right: 10px;
}

Change bullet points shape using CSS

CSS offers a couple of shapes to style your unordered HTML list bullet points by default. You can easily change the default bullets shape by setting the list’s list-style property value from the default disc (•) to circle (○) or square (▪). As we mentioned before, those bullet point shapes can’t be additionally styled.

To perform additional styling default bullets need to be replaced with Unicode characters, images or for example Font Awesome icons.

Change bullet point color and shape to customize unorderd lists

Examples of unordered list bullet points replaced with Unicode symbols, Fontawesome icons and custom images

Replace bullet point color and shape with Unicode character

In order to change bullet point color, in the example above we replaced the default list bullet with an Unicode bullet character. First we removed the default bullets by settings the list-style property value to none. Then we’ve added the Unicode bullet symbol to list items by setting the content property value to “\2022” for the li::before selector.

To replace the bullet symbol, you just have to change the “\2022” value in the example above to the Unicode value of the character you want to use.

Here are a couple of suggestions for Unicode symbols codes you can use for changing your list bullets shape:

⏴Pointing triangle (filled) \23F4
▷ Pointing triangle (empty) \25B7
◉ Target \25C9
◎ Double circle \25CE
★ Star (filled) \2605
☆ Star (empty) \2606
☑ Check box \2611
✓ Check mark \2713
☛ Pointing finger (filled) \261B
☞ Pointing finger (empty) \261E
☻ Smiley (filled) \263B
☺ Smiley (empty) \263A

Discover more symbols you can use for replacing bullet points of your unordered list in the full Unicode Character Table.

Replace unordered list bullet points with Font Awesome icons

Font Awesome is a great set of free (and additional paid) icons that behave like fonts. Therefore, CSS styles are applicable to them and that makes ‘em great for all kinds of use in web development. Using Font Awsome icons to replace bulet points in an unordered HTML list is a good web design practice.

Enable Font Awesome in WordPress to change bullet points color and shape

Font Awesome icons are not enabled by default in WordPress. In order to use them for changing bullet points shape you first have to enable Font Awesome. There are various Font Awesome plugins in the WordPress Plugins repository that you can install to enable it. Make sure you use an up to date plugin so you can use the latest version of Font Awesome icons. We suggest you use the Official Font Awesome plugin.

If you are developing a pure HTML website or you struggle to use as less plugins as possible, you can enable Font Awsome by linking it’s stylesheet to your site <head> section. Just copy the latest version of the stylesheet <link> into your site <head> section and you’re good to go.

Head <link> element we used for our example:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

Replacing bullet points with Font Awesome icons using CSS

Replacing unsorted list bullet points with Font Awesome icons using CSS is pretty simmilar to the proces of replacing bullets with Unicode symbols. A slight modification to the example shown above is needed. All there is to do is add a font-family:’Font Awesome 5 Free’; property to the li::before selector and replace the value of the content property with a Font Awesome icon code we want to use. For example, lets use a nice round check mark (FA code: f058 ) and color it green. Optionally, with a couple more CSS properties we can set it’s size, margins, position, etc.

Here is all the CSS code needed to replace list bullet points with a Font Awesome icon:


ul { list-style: none; } /* Remove default bullets */

li::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f35a";
    color: green;
	
    margin-right: 10px; /* Optional tweak */
}

If you done everything correctly and previously enabled Font Awesome on your site, you’ll get a nice looking list that stands out in your site’s content. A wide variety of icons to use for your custom list bullets you can find on the Font Awesome site.

Heads up! At the time of writing this article, latest version of Font Awesome was 5.8.1. Make sure you use the latest version of Font Awesome on your site. If your FA bullets dont show up correctly also check for the latest syntax version of the font-family: property value and replace it in the CSS code if needed.

How to replace bullet points with images

To completely customize the look of your unordered HTML lists you might want to replace bullet points with images. In order to do it, you first have create a custom bullet point image and upload it into your website. If replacing bullet with image in WordPress you’ll probably upload it into your Media library. You can use JPGs, transparent PNGs and even animated GIFs for your list bullet image.

Chose your image size carefuly since you can’t resize it with CSS. You might consider different image sizes for desktop monitors and tablets or smartphones.

Replacing list bullets with images using CSS

There’s a handy CSS property for replacing list bullets with images. All you have to do is add the list-style-image property to your unordered list style. The value of the list-style-image will be the (relative) url of your image. You’ll probably have to use a couple more CSS properties to adjust the look of the list, such as margin, padding and font-size.

Here’s an example of code to replace list bullets with images:


ul { 
list-style-image: url('/path-to-your-image/your_custom_bullet.png');
} 

/* Set space between bullet and content */
li { padding-left: 10px; }

Learn more on Styling HTML lists with CSS

This example showed you a nice method of customizing HTML lists. Simmilary, using a couple more CSS properties, your list could stand out even more. As a next step, you could perfectly align your list or split a long list into two or three columns improve it’s readability even more.

Links below will teach you more methods of styling HTML lists:

How to change bullet points color and shape with CSS