Replace Bullets With Icons
Turn Bullets Into Check Marks in Divi
You may have noticed we sometimes use checklists here on the blog and in our child themes for sale. I decided to show you how easy it is to change bullet lists into check marks in Divi with just a few snippets of CSS code that you can use globally on your Divi website.
▶️ Please watch the video above to get all the exciting details! 👆
How to Use The CSS Snippets
1. Add a CSS class to your text module
Add a Text Module to your layout.
Open the Text Module settings.
In the Content tab, create a list of bullet items.
Go to the “Advanced” tab.
Open the “CSS ID & Classes” toggle
Add the class “pa-bullet-list-1” to the “CSS Class” (change the class number to 2 depending on which snippet you use below)
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.
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 ๒ (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 ;)
You’re welcome Katrijn!