Adding custom icons to the Accordion Block in Squarespace (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

Are you looking to customize the Accordion Block in Squarespace?

Are you specifically wanting to use your own custom icons for the different questions/accordion items on the block?

If you’re nodding in agreement right now, then this tutorial is for you, my friend!

A member of the Club asked a similar question a while ago, and so today I thought I’d share with you the easiest and fastest way to make it happen with a bit of our beloved CSS.

Ready? Then let’s jump right into it.

Note: the icons from IconFinder can be found here, here and here.

Tutorial

Overview & timestamps

To take advantage of the original icon settings we have available – at least most of them – we’ll be tackling this customization through the background-image property and a couple of advanced selectors like :nth-child( ) to be able to style each individual accordion item

1. 00:00 - Intro

2. 00:53 - Looking for a container to add the custom image
   The very first need we’ll need to do here is to locate a container that’s going to work alongside our goal. This means we’ll need to look through a couple of them to see which one may be the best choice in this situation and create our selector.

3. 02:55 - Adding the new custom icon
   Once we have our target container nailed down, we’ll be able to bring in the background-image property – and a few other background-related ones – to add in the replacement icon for ALL accordion items.

4. 04:16 - Hiding the original accordion block icon
   Next up, it’s time to hide the arrow or plus sign from the block! To keep things flexible in terms of the code, I’ll be showing you how I would tackle this part of the process so that, regardless of which icon option you’re working with, the final result remains the same.

5. 06:00 - Testing the icon size and position settings inside the accordion block
   With our new custom icon in place, we’ll be able to test out how the different settings of the block continue to work in our favor to help us easily resize and shift the image from left to right without any extra code!

6. 07:00 - Adding a custom icon for each individual accordion item
   And now – for the part of the tutorial you’ve probably been waiting for – we’ll tackle how to use DIFFERENT icons for EACH individual accordion item or question, by complementing the previous code with an extra selector.
   We’ll be looking into how the :first-child, :last-child and :nth-child( ) advanced selectors can help us achieve what we’re after.

7. 11:17 - Cleaning up the code
   Last but not least, I’ll give you a quick tip on how to clean up the code in this situation, by removing any unnecessary global styles.

Alrighty! And there you have it!

That’s how you can implement this nifty CSS trick to be able to use custom icons in your client’s accordion block.

Until next time,

B.

---

Full code

Same icon

/*ADDING CUSTOM ICONS TO THE ACCORDION BLOCK IN SQUARESPACE (7.0 & 7.1)*/
//To add the same custom icon to all accordion items
.accordion-icon-container {
  background-image: url(ICON.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.accordion-icon-container div {
  visibility: hidden;
}

Different icons

/*ADDING CUSTOM ICONS TO THE ACCORDION BLOCK IN SQUARESPACE (7.0 & 7.1)*/
//To add a different custom icon to each accordion item
.accordion-icon-container {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.accordion-icon-container div {
  visibility: hidden;
}

.accordion-item:first-child .accordion-icon-container {
  background-image: url(ICON.PNG);
}
.accordion-item:nth-child(2) .accordion-icon-container {
  background-image: url(ICON.png);
}
.accordion-item:nth-child(3) .accordion-icon-container {
  background-image: url(ICON.png);
}