How to Add custom icons to the Accordion Block while keeping the arrow or plus sign (7.0, 7.1 CE & 7.1 FE)
1. Add this code to CSS
Same icon for all dropdown titles
// WWW.SQUARESPELL.COM //
.accordion-item__click-target::before {
background-image: url(ICON.png);
background-size: contain;
content: '';
height: 40px;
margin-right: 10px;
width: 40px;
}
// WWW.SQUARESPELL.COM //
2. Add this code to CSS
Different icon for each dropdown title
// WWW.SQUARESPELL.COM //
/*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);
}
// WWW.SQUARESPELL.COM //
To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!
