Adding custom icons to the Accordion Block while keeping the arrow or plus sign (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

In a previous tutorial, we tackled how to add custom icons to the accordion block titles, both by using the same icon for ALL items and by using a DIFFERENT icon for each dropdown.

However, because that approach we used pretty much required us to replace the original indicators to be able to achieve the branded look, I got a question on whether it was possible to have the custom icons WITHOUT having to substitute the native chevron arrow or plus sign.

And the good news is that, there is!

And that’s exactly what we’ll be breaking down in today’s CSS trick.

So, if this is something you want to implement on your client’s site, hop right onto the vid!

Tutorial

Overview & timestamps

The method to apply the custom icons in this situation is slightly different than what we used last time, but it’s still very easy to implement and done purely with CSS, so let’s get to it:

1. 00:00 - Intro

2. 01:03 - Looking for the container to add our custom icon
   To start our customization, we’ll be breaking down the approach we’ll use this time around (spoiler alert: it rhymes with judo sediment) and then take a peek at the HTML structure of our accordion block titles to see which container would work the best for what we’re trying to do. There are a few options, but there’s one that can make our live’s much easier when it comes to alignment.
   Once we’re happy with our choice, we’ll move onto writing our selector.

3. 02:50 - Creating the pseudo-element
   Next up, it’s time to add the basic properties needed to create our empty container that’ll be holding the icon we want to use. We’ll include a temporary color as well just to see what we’re doing on the screen and make sure everything looks right.

4. 04:12 - Adding the custom icon
   Last but not least, we’ll bring in our branded icon. In this step, I’ll show you the two routes you can take to add the image, depending on if you want to use the same icon for all titles, or if you want to apply a different one to each dropdown. In the latter case, we’ll need to look for a way to target each individual accordion item, with the help of the :nth-child selector.

And that’s it!
I hope you found this little trick helpful.

Until next time,

B.

---

Full code

Same icon for all dropdown titles

/*ADDING CUSTOM ICONS TO THE ACCORDION BLOCK WHILE KEEPING THE ARROW OR PLUS SIGN (7.0, 7.1 CE & 7.1 FE)*/
.accordion-item__click-target::before {
  background-image: url(ICON.png);
  background-size: contain;
  content: '';
  height: 40px;
  margin-right: 10px;
  width: 40px;
}

Different icon for each dropdown title

/*ADDING CUSTOM ICONS TO THE ACCORDION BLOCK WHILE KEEPING THE ARROW OR PLUS SIGN (7.0, 7.1 CE & 7.1 FE)*/
.accordion-item__click-target::before {
  background-size: contain;
  content: '';
  height: 40px;
  margin-right: 10px;
  width: 40px;
}

.accordion-item:nth-child(1) .accordion-item__click-target::before {
  background-image: url(ICON-1.png);
}
.accordion-item:nth-child(2) .accordion-item__click-target::before {
  background-image: url(ICON-2.png);
}
.accordion-item:nth-child(3) .accordion-item__click-target::before {
  background-image: url(ICON-3.png);
}