Title icons can make a Divi Accordion module easier to scan, especially for FAQs, service lists, and feature sections. In this guide, you'll learn how to add icons to accordion titles, style them differently for open and closed states, and give a specific accordion item its own icon settings when needed.
Add Icons to Divi Accordion Titles using our Accordion Title Icon Feature Plugin
This method uses our Accordion Title Icon feature to add a default title icon to an Accordion module, then override that icon on an individual accordion item. You'll also set separate colors and sizes for open and closed accordion states.
This method works with Divi 5.
Get the Feature
The Accordion Title Icon settings used in this guide are added by our single-feature plugin. To add the title icon feature to your site, begin by installing and activating the plugin, which you can get here:
Choose the default title icon
Open the settings for the Accordion module you want to customize. In the "Content" tab, find and expand the "Title Icon" section.
In the "Title Icon" settings, use the icon picker to select the icon you want to display to the left of each accordion title.
This parent-level icon will be used by all accordion items that do not have their own item-level icon selected.
Style the default icon (open and closed state)
Switch to the "Design" tab and expand the "Title Icon" settings. Set the open-state icon color and size.
Then expand the "Closed Title Icon" settings and set the closed-state color and size.
These styles apply to any accordion item using the default parent icon settings.
Override the icon on an individual Accordion item
To give an accordion item its own icon, open the Accordion module's child elements list and select the item you want to customize. In that item's settings, go to the "Content" tab, expand "Title Icon", and choose a different icon from the icon picker.
This item-level icon replaces the default parent icon for this accordion item only.
Style the item-level icon (open and closed state)
With the individual Accordion Item settings still open, switch to the "Design" tab. Expand "Title Icon" and set the item's open-state icon color and size
Next, expand "Closed Title Icon" and set the item's closed-state color and size.
These item-level styles override the Accordion module's default title icon styles for this item only.
Save and check the published accordion
Save and publish the page, then exit the Visual Builder and view the page on the front end. Check that the accordion titles show icons to the left of the title text.
If you added an item-level override, the customized item should show a different icon from the other accordion items.
Click between accordion items on the front end to confirm the open and closed styles are applied correctly.
Take it further with more Accordion improvements
Once your accordion title icons are in place, you might like to make your accordion even better with these guides:
- Make Divi Accordion Items Closeable – Let visitors close the currently open accordion item.
- How to Make a Divi Accordion All Closed by Default – Start all accordion items closed for a cleaner FAQ layout.
- How to Add FAQ Schema to a Divi Accordion Module – Add FAQ structured data to accordion-based FAQ content.
Conclusion
You have now seen how to add icons to Divi Accordion module titles, style them for open and closed states, and overridden the default icon on a specific item. If you are trying to create a different accordion effect, let us know in the comment below.
0 Comments