Change Bullet Lists Into Check Marks (and More) in Divi Tutorial

How To Change Bullet Lists Into Check Marks (and More) In Divi

Here is a quick Divi tutorial showing you how to easily change bullet lists into checklists and other icons with a few simple CSS snippets.

Circle Checkmark

  • These are Great
  • They look nice
  • People like them
  • They are easy to make

Circle X

  • These are Great
  • They look nice
  • People like them
  • They are easy to make

NOTE: I noticed when I copied and pasted this code there was an unusual problem with the apostrophe around the icon code and font family. If you notice something odd, just replace the bad ‘ with a new ‘ and it should be good. 

How To Modify Our Check Mark To Make Your Own Bullet Lists In Divi

Once you have the base code above you can now use any icon that you would like. The icons I use here are ETModules icons, which come standard with Divi and you can view a list and grab from their blog for free. The rest of this tutorial will be a simple example of how to add other icons of your choice.

Make Bullet Lists Into Check Marks in Divi

Once you have copied the code from the icon that you want, you will need to find the original code in the first snippet listed above and replace it. In this example, the &#xe52 (the checkmark) is used. NOTE: Always remove the &#x.

13

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
24 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dan Burhans
8 months ago

Thanks for sharing this. Didn’t want to install Font Awesome because I figured Divi had checkmark symbols I needed somewhere in the theme. I did need to retype apostrophes around the icon code and font family. My new list looks great.

Dan Burhans

No problem I’ve run into this before when copying code, thankfully you noted it in the instructions.

The problem has something to do with “right” and “straight” apostrophes and how various text editors handle the two. This will give you some insight, but I couldn’t find a solution:
https://stackoverflow.com/questions/4902236/apostrophes-changes-when-i-copy-and-paste

Maybe someone else will chime in with the answer.

Thanks again,
Dan

Aleksandra Kuzmenko
Aleksandra Kuzmenko
6 months ago

Hi, thank you! It worked for me only with “”:

content: “\e052”!important;

Drew Downz
6 months ago

No bueno! Followed to a T and even read the note at bottom.

Leanne
Leanne
5 months ago

Cannot get this to work ???

Nikhil Desai
4 months ago

Hey, I can’t seem to get this to work for the pricing tables on divi – the excluded element on the pricing table keeps the green tick styling even when I change the classes.

amp
amp

id like to get this to work in divi price table also can you help me?

Cohill
Cohill
3 months ago

Worked nicely for me.
Except now the headings don’t line up. they start half way through the icon left of the text.
Is there something that can be done about this?

Cohill
Cohill

The title does not line up with the text below it, is set in a bit. It is as if it has one or two spaces before the title starts. The bullets (well I ‘ve got stars) line up with the beginning of the spaces. Does this make sense?
I’m building the site at the moment, I can’t provide a link. Where can I upload a screenshot?

Susanna S.
Susanna S.
2 months ago

Thank you for this tutorial. Can you share how to make the lists stay aligned with the bullet when you have long sentences. I found this CSS code but can’t figure out how to to add it.

ul#myList {
list-style-position:outside;
}

Andrew
Andrew
1 month ago

Hi, How would you increase the size of font and still have the bullets in line with the text, when I do it the text drops down out of line with the bullet.

Thanks,
Andrew

Michelle
Michelle
1 month ago

This is not working for me.

Dick Ockers
1 month ago

Dear mister Miller, a deep bow of respect! Just what I needed! thank you

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart