I wanted to have a specific icon before the title of each title of an accordeon element.
With the blurb module it’s easy to add an icon. It’s not out of the box possible with the accordion module.
You need some CSS.
So first I added a CSS class to the accordion.
Next I added the CSS code below.
This can be done using a Code Module on the page itself (don’t forget to wrap the code inside <style> CODE GOES HERE</style> then).
Or to enable this side wide: you could go to Divi Settings.
Divi -> Theme Options. Add it there on the “Custom CSS” section (no <style> </style> needed over there).
/*agriculture*/
.custom-acc div:nth-child(1) h5.et_pb_toggle_title:after {
content: '\e0de' !important;
display: block !important;
float: left !important;
color: #008000 !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
/*economic*/
.custom-acc div:nth-child(2) h5.et_pb_toggle_title:after {
content: '\e029' !important;
display: block !important;
color: #6d071a !important;
float: left !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
/*infra*/
.custom-acc div:nth-child(3) h5.et_pb_toggle_title:after {
content: '\e092' !important;
display: block !important;
color: #ff8c00 !important;
float: left !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
/*medit*/
.custom-acc div:nth-child(4) h5.et_pb_toggle_title:after {
content: '\e00a' !important;
display: block !important;
color: #008000 !important;
float: left !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
/*money*/
.custom-acc div:nth-child(5) h5.et_pb_toggle_title:after {
content: '\e0e7' !important;
display: block !important;
color: #fada5e !important;
float: left !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
/*neighbour*/
.custom-acc div:nth-child(6) h5.et_pb_toggle_title:after {
content: '\e0df' !important;
display: block !important;
color: #ba55d3 !important;
float: left !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
/*political*/
.custom-acc div:nth-child(7) h5.et_pb_toggle_title:after {
content: '\e08b' !important;
/* color: #008000 !important; */
display: block !important;
float: left !important;
font-family: 'ETmodules' !important;
padding-right: 10px !important;
}
Recent Comments