Divi Accordion Module – How to add an Icon Before Each Item Title

Ever wanted to add a custom icon before the item title in the Divi Accordion module? This tutorial will show you how to do it using the module settings. 

There are a couple of ways you could do this, either by adding one of the icons available via the Divi theme or by adding your own custom icon using an image. 

Add an icon from the Divi "ETmodules" font family

Start by opening your accordion settings and click on the settings icon for the particular item you want to add the icon to. 

Divi Accordion Module Settings

Then navigate to the Advanced tab of the item settings

Advanced Settings

Toggle open the Custom CSS settings

Accordion Custom CSS

Locate the Before settings input box, this is where you can add some CSS that will inset an icon before the item title. Divi comes with a fairly extensive range of icons which are part of their “ETmodules” font. You can view the available icons and their corresponding codes  at https://dividezigns.com/divi-icon-codes/

As an example we will load a double arrow icon by adding the following code into the Before input box.

    
     font-family: 'ETmodules';
content: "\39";
Before Content

Then scroll down to locate the Toggle Title settings input and add the following code:

    
     display: inline-block;
Toggle Title Setting

Save your changes and you should have an icon that looks like this:

You can play around with the spacing by using padding or margin css and as mentioned you can choose from a range of icons available with the Divi “ETmodules” font family which you can view via the link above. 

Add a custom icon using an image

If you want to try and add your own custom icon you can do so by uploading a png image to the media library. Copy the image URL and then take a similar approach to to what we did previously and add some code to the item’s Before settings input box. 

Custom Image Settings

Below is the code snippet for reference that you can copy and paste. Make sure to replace the image URL with the URL of the image you have uploaded to your media library. 

    
     content:"";
background-image:url("https://yourimagelocation.png");
display: inline-block;
height: 20px;
width: 20px;
background-size: 20px 20px;
position: relative;
top: 5px;