Classic Accordion -Customize Each Icon in Tab

[pearlmultimedia]

I’m using X and I have customized my classic accordions in the Global CSS using this code:

.x-accordion-heading .x-accordion-toggle.collapsed {background-color: #e7d9d8; color: #151510;}
.x-accordion-heading .x-accordion-toggle {background-color: #cfdad6;}
.x-accordion-heading .x-accordion-toggle:hover {color: #ffff;}
.x-accordion-heading .x-accordion-toggle {color: #FFFF;}
.x-accordion-heading .x-accordion-toggle.collapsed:before{float: right; content: "\f078";; color: #FFF}
.x-accordion-heading .x-accordion-toggle:before{content: "\f077"; float: right; color: #F490a9; transform: rotate(1deg);}

However on some pages I want to style the Font Awesome icons differently. So for example I want one tab to have an arrow icon, one to have a person icon. How do I do this? I don’t want this done globally because I want to change them for each accordion I create. I figure I have to do it in the Inspector pane for the accordion, but I’m not sure how or what to put… Thanks in advance for any help!!

[ruenel]

Hello There,

Thanks for writing in! If you want to change icons on a page by page basis, please edit the page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-accordion-heading .x-accordion-toggle.collapsed:before{
  content: "\f078";
}
.x-accordion-heading .x-accordion-toggle:before{
  content: "\f077"; 
}

Please make sure that you have change the content value because I just copies it from your code above. For your reference, you can check out the value from here: http://fontawesome.io/icons/

Hope this helps.

[pearlmultimedia]

Thanks. But can I change the icon for different tabs within the same accordion?

[christopher]

Hi there,

It will be possible by accessing each accordion tab checking the position of it in the CSS selector. For example, we can change the code which my colleague mentioned to this:

.x-accordion-group:nth-child(2) .x-accordion-heading .x-accordion-toggle.collapsed:before{
  content: "\f078";
}
.x-accordion-group:nth-child(2) .x-accordion-heading .x-accordion-toggle:before{
  content: "\f077"; 
}

The code above will affect only on the second accordion item. Now you can add another code with :nth-child(3) to change the 3rd item and so on.

Thank you.

[pearlmultimedia]

Thanks Christopher! Also, what is the best way to change the font size of the accordion headers globally? I was looking in the Customizer for the site, but I can’t figure out which setting is controlling these header sizes.

[christopher]

Hi there,

I suggest that you use the CSS code below, but this time you will need to add it to X > Launch > Options > CSS:

.x-accordion-heading .x-accordion-toggle {
    font-size: 20px;
}

That way the size will be set globally for all accordion element headers. Feel free to change 20px to whatever site which you see fit with your design.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[pearlmultimedia]

Thank you @christopher.amirian!

[christian]

You’re welcome.