How To Add The Missing Icon To The Opened Divi Accordion Module Item Tutorial by Pee Aye Creative

How To Add The Missing Icon To The Opened Divi Accordion Module Item

In this tutorial I will show you how to add the missing Divi Accordion module icon when the toggle is opened.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS Class To The Divi Accordion Module

The first step is to add a custom CSS class to the specific Divi Accordion module that you want to add the icon. We do this so that the snippet affects only the module you want to add the icon to on your site, which allows you to choose which ones remain normal and which ones have this specific icon code.

Open the Accordion module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-add-accordion-icon” in the CSS Class input field.

add a custom class to add an icon to the open Divi accordion module

2. Add The CSS Code Snippet To Your Site

The rest of the tutorial is just as easy. Now that the class is added, you can go ahead and copy and paste the CSS into your site. As soon as you do this, the missing icon will appear in the opened Divi Accordion module item.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*add icon to the opened accordion*/
.pa-add-accordion-icon .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block;
	content: "\e04f";
}

Optional: Replace Icon

You can notice in the code snippet, we are adding an icon code with the content property. This is the solid negative icon (to match the positive icon) which is one of the built-in ETModules icons that comes with Divi. You can change the icon value as per your personal preference using the Elegant Icon Font icon codes.

Color & Size

The color and size settings for the regular closed icon will apply to this icon as well, so feel free to adjust that in the module settings. If you prefer to use a different color for the opened icon, simply add the desired color property and value it into the snippet above.

15

Last updated Jan 4, 2022 @ 12:29 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Neil

    Hi Nelson,

    Nice one – thank you 🙂 You’re website tutorials are a great resource to me and every other Divi user I think. Thank for your time. Much appreciated 🙂

    Cheers,
    Neil.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart