Foundation CSS Framework, how to change triangle on accodion

Question

I'm using foundation framework for the first time and for the most part everything is going smoothly. I am however having some trouble with the accordion in that I need to change the open/close indicator triangle that is in use. You can see it in the docs here. I've looked through the css and found the section with the accordion on foundation.css at lines 709-719 but there is no image to change or adjust.

I would like to change this icon to the one in my psd, but just can't figure out where. See attached screenshot for what needs to be changed.

I know how to make changes, in this case I just can't find where to make the change.

Answer 1

You can't find the image, because it's not an image. It's one section of a thick border on a small square. One side is grey, the other sides are transparent to create the triangle effect.

See "presentation.css" line 852:

ul.accordion > li.active .title::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid 6px;
    border-color: #9D9D9D transparent transparent transparent;
}

I used Google Chrome's object inspector.