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

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.

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