Code by Day | Explore By Weekend

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

20180214122145_IMG_9804_01
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

/*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’;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
position: relative;
top: 4px;
}

Circle X

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

/*bullet checklist 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;
font-family: ‘ETMODULES’;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
position: relative;
top: 4px;
}

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.

Please share this post!

Nelson Lee Miller

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

You Earned A Reward

For a limited time, we are offering our best blog readers a random CRAZY big 20% off coupon to use on any of our child themes! Just subscribe and we'll send you the code!

Blog Reader Coupon Code

Nice, we're sending you the code now!

0

Your Cart