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