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

Choose Bullets from the Text Design Options

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.

 

Choose Square from Unordered List Style Type

 

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

 

Add Class to Text box for Square Bullets

Here is how it should look after you assign the class:

Example of  Square Bullets

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

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

 

Add Class to Text box for Check List

Here is how it should look after you assign the class:
Example of  a Check List

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

Okay thats 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!

font-size: 1.2em!important;

The other great thing is you are not limited to a square bullet or check-list as shown in my example here. You could replace it to any other icon like a star or a clip.
Check out the icon codes on the following website.

 
For eg. if you wanted to use a lightbulb, the icon for a lightbulb is \e007
 

Just replace the following line of code in my snippet to replace the bullet by a light bulb like so:
content: ‘\e007‘!important;

Thats all for this tutorial, I hope you found it helpful!

 
If you found this DIVI TIP helpful,do leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog
Share This