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.
Then navigate to the Advanced tab of the item settings
Toggle open the Custom CSS settings
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";
Then scroll down to locate the Toggle Title settings input and add the following code:
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.
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;