Simple Steps to Change List Item Bullets to Square Bullets or Check List or Any Icon of Your Choice

Would you like to change your list items from regular bullets to some another icon and color of your choice? We can achive this by adding a few lines of CSS and assigning a class to the text modules.

In today’s example I am going to show you how to use square bullets instead of regular bullets for your list item. You can also change the bullet to a checklist or any other icon of your choice. Let’s see how this can be done.

Example of a Square Bullet as your list Item

Lets get started. You can change bullets to a square bullet in two ways.

First : Using DIVI Options.

Go to Text -> Settings -> Design Tab and Select the Bullets Tab as shown below

Next choose Square from the Unordered List Style Type as shown below. You can also change the color of the unordered list, but it will change the color of the bullet and the list item. If  you would like to change the color of the bullet only, then follow the second method below using CSS.

Example of  Square Bullets Using DIVI Text Options

• Lorem Ipsum
• Aut iure sint et
• Cum fugit aspernatur sed
• Non nihil esse a laborum
• Et placeat minima id molestias

Second: Changing Bullet List Type to Square Using CSS

Step 1) Add the following CSS to your style.css if you are using a child theme or alternatively go to – DIVI -> Theme Options – Custom CSS and add the CSS.

Square Bullets CSS

/** Start of Square Bullets **/
.square-bullets ul {
list-style-type: none!important;
}

.square-bullets ul li:before {
content: ‘\5e’!important;
color: #80000A;
font-family: ‘ETMODULES’!important;
margin-right: 8px;
margin-left: -20px;
}
/** End of Square Bullets **/

Step 2) Assign the text module where you want to change the bullets to square bullets the class of square-bullets as shown in the image below.
You have to open the Text Module Settings -> Advanced Tab  –> CSS Class

Example of a Check List as your list Item

Lets see one more example of adding a check-list instead of regular bullets to your list item.

Lets get started.
Step 1) Add the following CSS to your style.css if you are using a child theme or alternatively go to – DIVI -> Theme Options – Custom CSS and the CSS.

Check List CSS

/** Start of Check List **/
.check-list ul {
list-style-type: none!important;
}

.check-list ul li:before {
content: ‘\e052’!important;
color: #80000A;
font-family: ‘ETMODULES’!important;
margin-right: 8px;
margin-left: -20px;
}
/** End of Check List **/

Step 2) Assign the text module for which you want to change the bullets to a check list a class of check-list as shown in the image below.
You have to open the Text Module Settings -> Advanced Tab  –> CSS Class

Okay that’s how easy it really was! Adding some CSS and assigning the corresponding class to the text module. You are not limited to just the text module. You can add that class to the Blurb module or actually any DIVI module that has body text in the options.

Furthermore you can change the color of the bullet/check-list by changing the following CSS in the snippet provided.
color: #80000A;

You can also change the size of the bullet or check-list by adding the following CSS in the same snippet.  Adjust the font-size to your liking!