[iamadamkennedyParticipant]

I’ve searched all over the forums for what I assumed would be a simple css code, but can’t seem to find the answer. Looking to change the +/x icons on the Accordion title bar for either the angle-double-right/angle-double-down icons or the chevron-right/chevron-down icons.

Thank you for any support you can offer on this.

http://adamkmedia.com/centrixity/

[ChristopherModerator]

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

.x-accordion-heading .x-accordion-toggle:before{
content: "\\f101";
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

You can put ‘f105’ instead of ‘f101’ to display right angle.

Hope it helps.

[iamadamkennedyParticipant]

Thank you, this worked like a charm! Two quick follow up questions:

Can you independently control the color of the icon in open/closed/hover states?

What does f105 and f101 actually reference? Is there a list I can reference? I plan on utilizing X for most of my clients going forward and would like to be able to flex to their respective brand images when building accordions.

Thanks again!

[FriechModerator]

Hi there,

To control the icon color on open state you can add the color: red; rule on the above code.

.x-accordion-heading .x-accordion-toggle:before{
content: "\\f101";
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
color: red;
}

And for the close and hover state add this custom css as well.

.x-accordion .x-accordion-heading .x-accordion-toggle.collapsed:before {color: blue;} /*closed*/
.x-accordion .x-accordion-heading .x-accordion-toggle.collapsed:hover:before {color: green;} /*hover*/

Change the color values where you see it fits.

I recommend that you put this on your child theme’s style.css file, because every time you save on the customizer the \ will be strip out.

The f105 and f101 are unicodes, you can see the list of icon with unicode here

Hope it helps, Cheers!

[iamadamkennedyParticipant]

Your detail is unmatched and I cannot thank you enough for the well thought out responses, especially in such a quick timeframe. Thank you!

[Paul RModerator]

You’re welcome!

[corylewisParticipant]

Hey there. When I change the content in my accordian on the live page to the right I can see the change. And it is the icon. But when I save it to cornerstone it comes up with the actual code showing not the icon. Can you tell me what I am doing wrong please?
.x-accordion-heading .x-accordion-toggle.collapsed:before {
color:#ff0000;
content: “//f101”;

}
Now when I use this it doesn’t change it on the live page either. So I get the actual code before and after.

[NicoModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

If necessary, you could also open a new ticket so we could check you setup closer by sharing your admin credentials.

Don’t forget to set private reply when sharing a private details.

Thanks.

[corylewisParticipant]

thanks for the reply here is the url http://corylewis.me/

[ChristopherModerator]

Hi there,

Please add this in child theme’s style.css file :

.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: #ff0000;
    content: "\f101";
}

Hope that helps.

[corylewisParticipant]

That is pretty much what I had. So I deleted mine and added yours. But the same thing happens. It looks great then when cornerstone saves it, the actual code is showing not the icon. I included a picture of the problem.

[RupokMember]

Hi there,

Thanks for updating. Can you confirm you are adding this to Child Theme‘s style.css? It doesn’t work on Customizer since it get stripped.

Cheers!

[corylewisParticipant]

Here is the child theme I entered it into. But it doesn’t change anything.

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

.x-accordion-heading .x-accordion-toggle.collapsed:before {
color: #ff0000;
content: “\f101”;
}

[JadeModerator]

Hi Cory,

I have checked your site and the CSS for the icons seems to be working fine now. See screenshot below.

[corylewisParticipant]

Hey not sure why it changed all of a sudden, weird to me but that is great thanks.

[Author]

Posts