Removing the triangle icon on the Genesis Accordion Block and add Font Awesome instead

It’s been kind of bugging me for a while: The triangle icon before the title on the Genesis Accordion Block (formerly Atomic Blocks Accordion Block).

Genesis Accordion Block with the triangle in place
The Accordion Block with the triangle

Today I searched for a solution and found one. Thought I share the code here for future reference and for everyone who happen to stumble upon this post. Here is the CSS snippet that makes the triangle go away.

.gb-block-accordion details summary::-webkit-details-marker {
  display:none;
}

I found the solution on Stack Overflow after a thread on the Atomic Blocks forum learned me that this triangle was browser generated.

Other styling adjustments

To make it fit my need, I made a few more styling adjustments. I changed the background color, added a box shadow and applied some Font Awesome icons to replace the triangle. This is the result.

Some Random Title in the Accordion Block

This is how the accordion looks now.

Here is a snippet of the CSS (click here for the raw snippet).

This site uses functional cookies. If you also want access to embedded content then click accept. More information

Deze site is standaard ingesteld op 'cookies toestaan", om je de beste mogelijke blader ervaring te geven. Als je deze site blijft gebruiken zonder je cookie instellingen te wijzigen, of als je klikt op "Accepteren" hieronder, dan geef je toestemming voor het gebruik van Cookies.

Close