Switch the icons on the accordion-heading

John
asked 10 years ago

Hi there,
In the DW Focus theme I’d like to make a design switch to the accordion-heading element.
Currently if an item is open it shows a PLUS sign at the right side of the heading when it’s open/expanded. If it’s closed/collapsed there’s a MINUS sign.
I’d like to switch them. It seems like it’s a Glyphicon thing, and I’ve been digging around using a variety of tools (especially Chrome’s Inspect Element tool) but I can’t find the reference.
I suppose it would be similar to if I wanted to switch the plus/minus to an upward- or downward-facing chevron.
Thanks, John

1 Answers

Wilfred
answered 10 years ago

Hi John,
To change plus/minus to upward- or downward-facing chevron in accordion heading, please go Dashboard / Appearance / Customize / General Setting , and add the following code to Custom wp_head section:

 <style>
.accordion .accordion-heading a:before, .accordion .accordion-heading a:after {
 background: none !important;
}
.accordion .accordion-heading a:before {
 font-family: FontAwesome;
 content: "\\F078";
 font-size: 13px;
 margin-top: -10px;
}
.accordion .accordion-heading a.active:before {
 content: "\\F077";
}
</style>

Hope this helps.

John
replied 10 years ago

You’ve ALMOST got me all the way there. Thanks for the help so far.

The excellent solution you’ve provided is for chevrons. My hope was for a solution that used the plus and minus, just switched around.

I found them in the FontAwesome stack and switched out the *content* attributes to be \\F067 and \\F068 respectively.

That worked, except for one thing: the plus and minus signs are missing a few pixels on the top outside edges of the crossbar. The effect is that those corners look rounded off, almost as though there’s a mask of the chevron over it.

Any ideas? Thanks in advance.

Dominic Staff
replied 10 years ago

Please send me your site for further checking.

John
replied 10 years ago

I changed the font-size to 11px and that fixed it. Thanks! Great template!