Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Change Bullet Lists Into Checkmarks Or Other Icons In Divi

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

153 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) <span class="comment-author-role-label author-label">Author</span>

      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) <span class="comment-author-role-label author-label">Author</span>

      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
  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
      • 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) <span class="comment-author-role-label author-label">Author</span>

        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) <span class="comment-author-role-label author-label">Author</span>

      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
      • Jodie Guerin

        Other solution ?

  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
  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) <span class="comment-author-role-label author-label">Author</span>

      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) <span class="comment-author-role-label author-label">Author</span>

        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
  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
      • 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
      • 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) <span class="comment-author-role-label author-label">Author</span>

        You can try using vertical-align: middle;

    • wendy

      vertical-align: middle; worked perfectly! Thanks!!

      Reply
  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
    • 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. 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
  46. 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
  47. Janneke

    On mobile iphone SE my starts (on website) turn into christmas trees. You know how i can fix this?

    Reply
  48. Howard

    Nelson,

    Thank you for this code. It has mostly worked for me, however I need help creating space between bullet points. I have tried adding a margin-bottom: but it doesn’t seem to do it. Any suggestions?

    Thanks

    Reply
    • Hemant Gaba

      Hey Howard,

      I feel that this issue is fixed on the website.

      Reply
  49. Howard

    Nelson,

    This is a follow up to my previous comment.
    I added

    ul > li, ol > li {
    padding-bottom: 8px;
    }

    This did work. I have padding-bottom within each bullet css class but that doesn’t work. Any idea why.

    Thanks,

    Howard

    Reply
  50. Ana Orias

    Hi!
    Thanks for your great and comprehensive tutorial!
    A funny thing happened here on my site, yet not functional enough to keep it.
    I wanted to add the exact checkmark you used in your example, I followed the steps and inside the visual builder everything looks great.
    But…….in real life the checkmark appears as the DOG EMOJI!!!
    Couldn’t find the mistake.
    Dynamic Icons are disabled.

    Reply
  51. Mike

    Thanks, but this is probably an outdated technique. I could not even upload the ET fonts to the Divi text module. I got error messages citing an unsupported file type or simply one not granting permission to upload.

    Reply
  52. Mr McTesty

    I made a few alterations to your code and thought you and or others may want to try it out…

    .pa-bullet-list-1 ul {
    list-style-type: none!important;
    }
    .pa-bullet-list-1 ul li:before {
    content: ‘\e052’!important;
    color: #ffc418;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -14px;
    font-weight:100;
    font-size: 1.8em!important;
    vertical-align: middle;
    }

    Reply
    • Hemant Gaba

      Hi McTesty!

      The alteration seems great. Thank you for sharing!

      Reply
  53. Tina Walker

    Thank you for a fantastic tutorial. I am having two icons show up. Here is my screenshot: https://www.screencast.com/t/zgiSyGcQCV
    I am using the following code:

    /*bullet checklist by http://www.peeayecreative.com*/
    .pa-bullet-checkmark ul {
    list-style-type: none!important;
    }
    .pa-bullet-checkmark ul li:before {
    content: ‘\4e;’!important;
    color: #2cba6c;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

    /*bullet chekclist by http://www.peeayecreative.com*/
    .pa-bullet-gift ul {
    list-style-type: none!important;
    }
    .pa-bullet-gift ul li:before {
    content: ‘\e073;’!important;
    color: #e03574!important;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

    I also tried the code that you had sent to Laura above, who was having similar issues. It also made my icons disappear altogether. My URL was placed in the website form field.

    Thanks in advance for your help!

    Reply
  54. Renee

    Hi!
    I tried to make the icons bigger, but they don’t line up with the text anymore. Do you have some additional CSS for that?

    Reply
  55. jacque

    How to use this on Widget/Footer?

    Reply
  56. Carol

    Hi, the bullets appear great within the Divi environment, but when its saved and I reviewed with Safari, Chrome, or Firefox either the bullets don’t appear or just the number appears (e052) in a small square

    Reply
    • Hemant Gaba

      Hi Carol!

      The icon code you shared above is not correct. Please use this code “\e052” and see if it helps. If the issue still happens, then share the URL of the page to investigate further.

      Reply
  57. Steve

    Thanks for this. When the bulleted text flows to the next line, it is not aligned with the start point of the first line. Is there a way to have them line up nicely?

    Reply
    • Hemant Gaba

      Hi Steve!

      Please change the margin-left value in the above code to -28px and see if it helps!

      Reply
  58. Dirk

    Hello I used this code. This also works wonderfully.

    The only problem I have is that it changes the color of the icon in the smartphone view.

    How can I avoid this or rather change it?

    /*bullet chekclist by http://www.peeayecreative.com*/
    .pa-bullet-list-2 ul {
    list-style-type: none!important;
    }
    .pa-bullet-list-2 ul li:before {
    content: ‘\e02d’!important;
    font-family: ‘ETMODULES’!important;
    margin-right: 10px;
    font-size: 0.9em!important;
    color: #ffc700;
    border-radius: 50%;
    padding: 0.0em
    }

    Reply
    • Hemant Gaba

      Hi Dirk!

      I have checked the code and the icon color is not changing on mobile. There must be some other code causing the issue. Can you share the URL of the page to investigate further?

      Reply
  59. Steve

    I’m inserting a check box in place of the bullet point. I’m seeing a Z instead of the check box when viewing the site as a customer, but the check box is there when viewing whilst logged in. I’m using Litespeed cache and not sure if that is causing the problem but cannot work out why.

    You can see an example here: https://www.creativephotoadventures.uk

    Reply
    • Hemant Gaba

      Hi Steve!

      It could be a cache issue. I have checked the page and now the checkbox are displaying fine on my end. If the issue persists at your end, clear the browser cache or disable browser extensions and check again.

      Reply
  60. Daniel

    Would you mind updating this post considering the ::marker tag instead? I think this is a better/cleaner approach.

    Reply
    • Hemant Gaba

      Hi Daniel!

      Thank you for suggesting an alternative solution. However, it is difficult to move the icon when the code is applied to the marker tag.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart