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

Update 2021: The Webkit details marker selector is depreciated, so I updated the code below.

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).

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 {
  list-style: none;
}

.gb-block-accordion details > summary::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.

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

Want to add some smooth transitions as well? This article explains how to add some animations to the details element.