By default, the Divi Accordion module has the icons on the right of the toggle title. However, there is no built-in setting to move the icons to the left. This can be frustrating, especially if you are trying to achieve a specific aesthetic design.
Fortunately, there is a simple CSS snippet that you can use to move the Divi Accordion icon to the left. This article will show you how to move the icons to the left on the Divi Accordion module using custom CSS. We will also provide a step-by-step guide on implementing the CSS snippet.
Moving Icons to the Left on Divi Accordion Module
For your information, previously, we’ve written about adding icons to the opened items on the Divi Accordion module; you can visit that page if you want to learn about it.
Alright, let’s start the tutorial.
Step 1: Add the CSS Class
First, we need to add the CSS class to your Accordion module.
Go to the Divi Builder, add a new Accordion module, or select the existing one.
Go to the Advanced tab -> CSS ID & Classes on the module settings. Afterward, add “wppb_accordion_icon_left” to the CSS Class input field.
Note: If your module already has a CSS class that you use to add the icon to the opened item, make a space to add another class, then put the CSS class above.
Step 2: Add the CSS Snippet
Next, we will add the CSS snippet to your site. You can add the CSS snippet to your Divi Theme Options page (Divi -> Theme Options-> Custom CSS) or your current page from the Page Settings. In this example, we will put the code on the Page Settings.
Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.wppb_accordion_icon_left .et_pb_toggle_title:before {
left: 0 !important;
}
.wppb_accordion_icon_left .et_pb_toggle_title,
.wppb_accordion_icon_left .et_pb_toggle_content {
padding-left: 2em !important
}
The Code Explanation:
- The first CSS rule
.wppb_accordion_icon_left .et_pb_toggle_title:before {
left: 0 !important;
}
It selects all accordion icons with the CSS class wppb_accordion_icon_left and sets the left property to 0 pixels. This moves the icon to the left edge of the accordion title.
- The second CSS rule
.wppb_accordion_icon_left .et_pb_toggle_title,
.wppb_accordion_icon_left .et_pb_toggle_content {
padding-left: 2em !important
}
It selects all accordion icons with the CSS class wppb_accordion_icon_left and sets the padding-left property to 2em. This adds 2em of padding to the icon’s left and creates space for the icon to be moved to the left.
That’s it. As you can see from the image above, the icons are moved to the left once you add the CSS snippet. Don’t forget to save or publish your project if you want to.
The Bottom Line
This article shows how easily you can move the icon to the left on the Divi Accordion module. Moving the icon in the Divi Accordion module to the left is a simple CSS change that can make a big difference in the appearance of your website. This can be useful for various reasons, such as matching the design of your site or making the icons more visible to users.
