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.
Categories: Featured Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

If your icons are not showing, please make sure to disable the Dynamic Icons setting in Divi>Theme Options>Performance. Also ask Elegant Themes to fix this issue ;)

74

Last updated Dec 20, 2021 @ 2:54 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

125 Comments

  1. Dan Burhans

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Dan,
      Yes that’s exactly why I created this using the built-in icons! So sorry about the apostrophes, I can’t seem to resolve that issue. It must be my OS doing it, or a plugin perhaps. Glad you got it working!

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

  2. Aleksandra Kuzmenko

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

    content: “\e052”!important;

    Reply
  3. Drew Downz

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Drew, that’s strange because what you see here on the page is the actual code working in real time. I would be happy to take a look at what you are trying, just provide the link.

      Reply
  4. Leanne

    Cannot get this to work ???

    Reply
  5. Nikhil Desai

    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.

    Reply
      • amp

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

  6. Cohill

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Cohill,
      I’m not sure what you mean, can you provide a link or screenshot? You can try adjusting the CSS as needed for the spacing and position of the icons.

      Reply
      • 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?

      • Nelson Lee Miller (aka The Divi Teacher)

        You just need to adjust the spacing in the CSS. Change the margin-left: -14px; to something else like -30px and play around until you find what works for your situation.

  7. Susanna S.

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Susanna,
      That’s not going to work because we actually replace the bullet list. You just need to adjust the spacing in the CSS. Change the margin-left: -14px; to something else like -30px and play around until you find what works for your situation.

      Reply
  8. Andrew

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Andrew,
      Just change the font size in the CSS snippet to match. Depending what you are doing, you might need to add a line-height to the CSS as well.

      Reply
  9. Michelle

    This is not working for me.

    Reply
  10. Dick Ockers

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

    Reply
  11. Anagha Vaidya

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

    Reply
  12. Francine

    Excellent explanations as always! Thanks a million!

    Reply
  13. Matt Unsworth

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Matt,
      Great question, I assume you mean to have them both in the same bullet list? You can do that with some CSS tricks using “nth”, so for example .pa-bullet-list-1 ul li:nth(1):before { and add your code for the x and then do it again for nth(2) and add your code for the check.

      Reply
      • 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?

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Niki,
        I’m not sure how this would work with tables. It’s easy with just a bullet list if you want to try that. Just send me the link and I’ll share some code.

  14. Jo B

    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.

    Reply
      • 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;
         }
        
  15. Adam Giles

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Adam,
      You can refer to some of the other comments for this, since it is answered many times, but basically just adjust the spacing values in the CSS.

      Reply
  16. Anna Stansbie

    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 (I’m sure it’s in the right spot), but I don’t know how to upload it.

    Please help if you can, thank you SO much.

    Reply
  17. Mike

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

    Reply
  18. Paul

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

    Reply
  19. Spencer Neal

    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

    Reply
  20. Lisa King

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Lisa, make sure you are not adjusting the text line height, but rather the bullet text line height. You first have to click on the bullet list tab.

      Reply
      • Lisa King

        OK…I’ll check it out. Thanks!

  21. Lori Newman

    Thank you for sharing. This worked perfectly, thanks!

    Reply
  22. LIZ MARCH

    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?

    Reply
  23. Matt Clute

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

    Reply
      • 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?

  24. Stacie Benefield

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

    Reply
  25. Neil O'Rourke

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Neil,
      I wouldn’t be able to see that link since it is from the editor, but yes, absolutely. Just change any of the values, or add margin or line height.

      Reply
      • 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!)

      • Evan Courtney

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

        And mine still isn’t centered.

      • Nelson Lee Miller (aka The Divi Teacher)

        You can try using vertical-align: middle;

  26. Julia C Chiang

    Worked perfectly. Thank you!

    Reply
  27. Farrell

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Farrell,
      The first part of the snippet removes those, are you adding that with the custom class?

      .pa-bullet-list-1 ul {
      list-style-type: none!important;
      }

      Reply
    • Jeff

      I am seeing this same issue. I do have this included in the css:

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

      Reply
      • Hemant Gaba

        Hi Jeff,

        Could you please share the URL of the page where you are seeing the bullet points for me to investigate further on the issue?

    • Jeff

      Figured it out – you have to go into the Divi text module and select Design – Text – UL tab, scroll down ad select NONE from the bullet type drop down list

      Reply
      • Hemant Gaba

        Hi Jeff,

        I am glad that the issue is resolved now. 🙂

        Please let us know if you have any other query.

  28. peter carden

    Excellent. Worked after a while but it was a problem with my Divi not saving correctly. Soon as I slowed down it worked perfect. Perhaps you can shortcut another issue on a similar line to this. None of the other examples I have found so far have explained it as clearly as you have. I am trying to get an image to appear as a bullet and I have managed; of sorts. I can only make it work by applying it to the entire site in the Additional CSS. When I try to add it using your method I am getting stuck. Should I be applying the extra to clear the existing bullets first or is the image function different?

    ul{
     list-style-image:url(‘My image going in here all ok’);
    }

    Many Thanks, Peter.

    Reply
    • Hemant Gaba

      Could you please share the URL of the page where this issue is happening so that I could investigate further?

      Reply
    • peter carden

      Sorted it.
      Thought I had deleted to much by accident but realised it worked.
      This is how it went.

      .mybullet li
       {
      list-style-image:url(‘https://my details in here of course-mechanic-icon-6.png’);
      }

      With the mybullet in the css class section.

      I did not see; just the dot before the mybullet call.

      Reply
      • Hemant Gaba

        Great! I am glad that the issue is resolved now. 🙂

  29. Christian

    Thanks a lot! this worked like a charm!

    Reply
  30. Blair

    Thanks for this works great. The only issue is when a list item wraps down to another line, these subsequent lines don’t align nicely with the text of the line above.

    Reply
  31. Zaid

    Thanks for the css – how do I make the actual tick white? I’m using a transparent/dark background and want the tick to stand out more. The circle is a green. thanks

    Reply
  32. William

    Thanks for the tutorial
    I can’t seem to get the tick to display.
    I even replace the single quote to double quote. But still doesn’t work.

    Reply
  33. william

    All good I resolved it. Thank you for the code

    Reply
  34. Niki

    Hi Nelson,
    Thanks for the great tutorials! Slightly off topic here but still lists 🙂 Is it possible to have a 1, 1.1, 1.2, 1.3, 1.4 numbered list? Thanks!

    Reply
    • Hemant Gaba

      Hi Niki,

      Please paste the code given below in Divi > Theme Options > Custom CSS Panel to achieve the desired results:

      .pa-bullet-list-1 ul{
      counter-reset: item ;
      }
      .pa-bullet-list-1 ul li{
      display: block;
      }
      .pa-bullet-list-1 ul li:before{
      content: "1."counters(item, ".") " ";
      counter-increment: item;
      }

      Let me know if that helps. 🙂

      Reply
      • Niki

        Amazing thank you so much I will give it a go!

  35. Adam

    Not working when there’s no any other icon on page. Looks like font is not loading in that case. When I add any module with icon it starts to show my custom icons, but it is a bad fix.

    Reply
    • Hemant Gaba

      Hi Adam,

      Could you please share the URL of the page where you facing the issue for me to investigate further?

      Reply
  36. Greg

    Hi Nelson,
    When I tried this the Icon only appears when I’m using the Visual Builder. As soon as I exit the builder my bullets disappear.
    Here is the code I’m using and the URL of the page:
    /*bullet checklist by http://www.peeayecreative.com */
    .pa-bullet-list-1 ul {
    list-style-type: none!important;
    }

    .pa-bullet-list-1 ul li:before {
    content: “\e064”!important;
    color: #622f7f!important;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -30px;
    font-size: 1.2em!important;
    }

    http://marthadusage.kinsta.cloud/beyond-abuse-about-the-book/

    Thanks for any guidance on this.

    Reply
    • Greg

      Nevermind Nelson. They just started to show up after I made some additional edits to the page. I had even tried to clear cache and use a private browser. It wasn’t until I made other additions to the page that they decided to appear.
      Thanks for the tutorial.

      Reply
      • Hemant Gaba

        Hi Greg,

        We are glad that the issue is resolved now. Please let us know if you need any other help.

  37. Bryan Bozeman

    Hi PAC! Thanks so much for all of your helpful tutorials – they are so helpful!

    I recently used your custom bullet list code to add some custom bullets in a website I’m building. These bullets (small documents, “\68” and small arrows, “\3d”) look great in the Visual Builder, but when I exit the Visual Builder, they default to ‘h’ and two small horizontal lines, respectively. Any ideas on a fix?

    Here’s the CSS script I used:

    /* ### This creates custom bullet points; must match
    * CSS class on bulleted text in desired modules ### */
    /*bullet checklist by http://www.peeayecreative.com*/
    .custom-bullet-list-arrow ul {
    list-style-type: none!important;
    }
    .custom-bullet-list-arrow ul li:before {
    content: ‘\3d’!important;
    color: #BA0C2F;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

    .custom-bullet-list-doc ul {
    list-style-type: none!important;
    }
    .custom-bullet-list-doc ul li:before {
    content: ‘\68’!important;
    color: #BA0C2F;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

    Reply
    • Hemant Gaba

      Hey Bryan,

      Could you please go to Divi > Theme Options > Performance tab and disable all the settings there and see if that helps? If this solves the issue then enable the settings one by one to see which is creating the issue.

      Let me know how it goes.

      Reply
    • Hemant Gaba

      Hey Demitris,

      I have checked the URL provided and I am not able to spot the bullets on the page. It would be great if it’s fixed already but if it’s not, could you please guide me where I can see those bullet points?

      Reply
    • Hemant Gaba

      Hi Kieron,

      It might be a caching issue so could you please go to Divi > Theme Options > Builder > Advanced and click on the clear button to clear the Divi cache, save the changes, and then check again and see if that helps.

      Let me know how it goes.

      Reply
  38. Kieron

    Hi there I added the code and the icons are displaying within the divi-builder and in the customizer screen, but they do not display on the front end of the website. Can you please help with some advice as to what I’m missing?

    Reply
    • Hemant Gaba

      Could you please try using this snippet and see if that helps?

      .pa-bullet-list-1 ul li:before {
      content: '\4e'!important;
      background-color: #2cba6c;
      font-family: 'ETMODULES'!important;
      margin-right: 10px;
      font-size: 1em!important;
      color: #fff;
      border-radius: 50%;
      padding: 0.1em
      }

      For the cross sign, you can place \4d instead of \4e and change the background color to red.

      Let me know how it goes.

      Reply
  39. Kieron Atkinson

    Here’s a tip for anyone that can’t get this to work, applicable to Greg’s comment above. The icons were displaying for me in the builder and the customizer screen but not on the website front end. It was like the icons font “ETmodules” wasn’t loading. What I did was add a BLURB (which uses the icons) element into the page and then hid it with CSS. This must’ve activated the font to load on that page and the icons then appeared as normal. The page looks great now! Thanks for the code.

    Reply
    • Hemant Gaba

      Hey Kieron,

      We appreciate that you are addressing the issue and trying to help but the reason that the icons are not showing up when you exit the builder view is the Dynamic Icons Setting that is present in the Divi > Theme Options under the performance tab. Disabling this option will display the icons on the frontend properly.

      Reply
  40. Josh

    Hey Nelson,
    Thanks for the code! It’s very helpful to find ways for people like me that know enough to get into trouble. 🤣

    However (you knew that was coming), it works for me on the backend but does not on the front end. I have tried all manners of quote combos but all I get is an outlined E051 (firefox) or nothing at at all (chrome, Safari). It seems to me that the ETmodule font is not loading on my site?

    Here’s the url of an instance: https://guidemktg.com/can-your-customers-find-you/ (the Action Steps)

    Any help would be awesome.

    Reply
    • Hemant Gaba

      Hey Josh,

      Could you please go to the WordPress Dashboard > Divi > Theme Options > Performance Tab and disable the Dynamic Icon Option and see if that helps?

      Let me know how it goes.

      Reply
      • Josh Cowen

        Woohoo!!!!!! That did it. You are a master. Thank you, kind sir.

      • Sven

        I had the exact same problem, this solution did the trick! The solution should be added to the article to give it more exposure as I’m sure there is other people struggling with this exact issue

  41. ROB ELINGS

    Hey Nelson, this is a great resource. I get an issue when the text is longer than fits on one single line, and wraps around to the next line but it doesn’t aline with the bullet settings. (Kind of replicated it here below)

    • Unresolved trauma and pain including the emotions, fears, and false beliefs that are the result of unresolved trauma
    • Self-judgment, self-rejection, self-loathing, self-hatred, unforgiveness, and so on for where you have hurt others

    Hope you can help. Thanks
    Rob

    Reply
    • Hemant Gaba

      Hey ROB,

      Could you please tell me where I can spot this issue on the URL you provide for me to investigate the issue?

      Reply
  42. David

    Hi this works great. The only problem is that when the bulleted text is longer than one line, it doesn’t indent the text on the next line.

    Reply
    • David

      Hey, I found a solution, I just changed the number of margin…

      margin-left: -30px;

      Reply
      • Hemant Gaba

        Hey David,

        I am glad that the issue is resolved now. Please let us know if you need any further assistance.

  43. Juan

    Hi, Thanks for sharing this info, I was looking for something similar for my website.

    However on my divi editor after adding the code, I can see it working fine, then when visiting the website on my laptop there is no bullet point at all, and on my mobile all I can see is a puppy…

    Do you know what might be happening?

    Reply
      • Juan

        Thank you, it was that.. solved the issue! 🙂

      • Hemant Gaba

        Hey Juan,

        Great to hear the issue is resolved now. Let me know if you need any further assistance.

  44. Laura

    This is so helpful, thank you! When i paste the code below, I end up with BOTH purple square check boxes (which I want) AND the original circle checks that you include in the demo. I can’t figure out where they are hidden! Any ideas?

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

    .pa-bullet-list ul li:before {
    content: “\5a;”!important;
    color: #93278F;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

    Reply
    • Hemant Gaba

      Hi Laura
      Could you try this code once?

      .pa-bullet-list ul li:before {
      content: ‘\5a’!important;
      color: #93278F;
      font-family: ‘ETMODULES’!important;
      margin-right: 10px;
      margin-left: -14px;
      font-size: 1.2em!important;
      }

      Let me know if it helps. 🙂

      Reply
      • Laura

        Thanks so much for your response! Unfortunately, this made the bullet dissappear all together. The text is indented, but no symbol appears.

      • Hemant Gaba

        Hey Laura,

        Could you please share the URL of the website for me to investigate further?

  45. Katrijn

    Works perfect, thanks!

    Reply
  46. Lambert

    Hi Nelson

    Thank you for this fantastic tutorial. I am however having some issues getting the alignment correct. When I type a sentence and press enter to break into a new row, the word is placed right underneath the Icon

    Example:

    * Place your sentence here
    continue sentence here.

    (the Asterix is my icon for this example)

    Is there some CSS code I can use to align this?

    Reply
    • Hemant Gaba

      Hey Lambert,

      I am not able to see the issue on my end. Could you please guide me on where I can find it exactly on the website?

      Reply
  47. Christophe

    Hi. Your CSS desafortunately doesn’t work for me. I can see the custom checkmark in Divi builder mode, but they disappeared when I go in preview mode or I publish the page :/

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart