Code by Day | Explore By Weekend

How To Change Bullet Lists Into Check Marks And Other Icons In Divi Tutorial by Pee Aye Creative

How To Change Bullet Lists Into Checkmarks Or Other Icons 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.

2. Paste the CSS snippets below into your Divi>Theme Options>Custom CSS box

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Circle Checkmark

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

/*bullet checklist by www.peeayecreative.com*/
.pa-bullet-list-1 ul {
list-style-type: none!important;
}

.pa-bullet-list-1 ul li:before {
content: '\e052'!important;
color: #2cba6c;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}

Circle X

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

/*bullet chekclist by www.peeayecreative.com*/
.pa-bullet-list-2 ul {
list-style-type: none!important;
}

.pa-bullet-list-2 ul li:before {
content: '\e051'!important;
color: #e03574!important;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}

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.

30
Last updated Jan 22, 2021 @ 10:37 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
65 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dan Burhans
1 year 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
1 year ago

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

content: “\e052”!important;

Drew Downz
1 year ago

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

Leanne
Leanne
1 year ago

Cannot get this to work ???

Nikhil Desai
1 year 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
11 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.
11 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
10 months 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
10 months ago

This is not working for me.

Dick Ockers
9 months ago

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

Anagha Vaidya
8 months ago

Hi Nelson,

It’s a very useful blog. I was struggling with font family, icon code. But your blog and video made it easy for me. Really, awesome. Thank you dear..

Last edited 8 months ago by Anagha Vaidya
Francine
8 months ago

Excellent explanations as always! Thanks a million!

Matt Unsworth
Matt Unsworth
8 months ago

Hey, is there a way to have both x and ticks in one form? I can’t seem to work it.

Niki Loveland
Niki Loveland

Hi Nelson,

Thank you so much for the code snippets it looks so great. Like Matt I am also trying to have x and check in a same list. Actually its a table in a text module and I’m needing x and checks in different cells throughout the table. I have added the nth to the code but I am not entirely sure how it works and am unsure how to add that to my text module to get it to work. Do I need to add two classes to the text module?

Jo B
8 months ago

Thanks for the great and easy to follow instructions. I have a question though – how can I get the text that wraps around to a second line be justified and not under the tick icon?

Cheers, Jo.

Screen Shot 2020-06-19 at 7.23.51 am.png
Theresa
Theresa

Hi it is showing a marker so instead of the :before element try using something like this for long text:

ul li::marker { color: #BC9D63;
 font-family: "ETmodules" !important;
 content: '\e052'!important;
 }
Adam Giles
Adam Giles
8 months ago

Hi! Great tutorial! Followed it exactly. I read in the comments here that some folks had trouble. At first, I didn’t notice the style take effect, but I purged my cache and the new bullets appeared.I do have one question; how do I keep the hanging indent alignment when list items run to more than one line?

Last edited 8 months ago by Adam Giles
Anna Stansbie
Anna Stansbie
7 months ago

Hello lovely Nelson, I left a comment on the YouTube tutorial and thank you so much for answering 😁, however, I have checked everything, and purged cache etc. and I still can’t get it to work and my boring bullets are still unchanged. I am sure it’s me doing something wrong, so I apologies for being a pain, but I wondered if there was any other advice you have please? I noted the comment about the apostrophes, and re-input those, but still nothing. I have taken a couple of screenshots to show the code and where I have put it… Read more »

Mike
6 months ago

Is there a trick to getting the second line to indent? Please see attached mobile screenshot. Thanks!

Bullet Points Mobile.jpg
Paul
6 months ago

hey thanks, but there is a little down arrow before the icon,, how do i remove the arrow?

Spencer Neal
Spencer Neal
5 months ago

Hi Nelson, amazing as usual!

In case anyone also wants to use this awesome fix in the pricing table module I added the CSS class to the row settings (price module on has custom CSS in advance toggle)

Works great – thanks again

Lisa King
4 months ago

HI! Worked like a charm. I am having trouble with the line spacing though. The “text line height” adjustment is not working? Just me?? Thanks

Lisa King

OK…I’ll check it out. Thanks!

Lori Newman
3 months ago

Thank you for sharing. This worked perfectly, thanks!

LIZ MARCH
3 months ago

Beginner divi question here from a copywriter trying to learn all things DIVI for my new website – I have done step 1 OK, when copying the code from step 2, do I place this CSS at the top or at the bottom of the of the existing chain or code, or doesn’t it matter so much?

Matt Clute
Matt Clute
1 month ago

I get a series of symbols after adding it to my site, see photo below… ever seen that before?

Bullets.PNG
Matt Clute
Matt Clute

I must be blind, also a real novice here. It didn’t seem to change anything but should I see a slash \ in your code above?

Stacie Benefield
1 month ago

Nevermind, I was missing the backward slash, but it works now! Thank you!

custom bullets.jpg
Last edited 1 month ago by Stacie Benefield
Neil O'Rourke
Neil O'Rourke
1 month ago

Hi,

I need to adjust alignment vertically as the tick is slightly higher than the text. I tried using margin, padding and font size but to no effect.

https://teachban-artgallery.com/?page_id=238123

Is there a way of aligning the tick vertically?

Many thanks

Neil

Neil O'Rourke
Neil O'Rourke

Thanks for getting back to me Nelson. Changing line height didn’t work and margin-top and margin-bottom changes had no effect. Thelink I posted should work now (forgot to publish!)

Last edited 1 month ago by Neil O'Rourke
Evan Courtney
Evan Courtney

I’m using:
position: relative !important;
margin-top: 2px !important;

And mine still isn’t centered.

Screen Shot 2021-01-28 at 7.43.05 PM.png
Julia C Chiang
Julia C Chiang
15 days ago

Worked perfectly. Thank you!

Farrell
12 days ago

Worked easily but the default bullet is showing with check mark. How can I show just the check mark?

Screenshot (220).png

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart