Docs

[Kylie M]

Hi, I would like to edit the accordion header and remove the +/ – OR replace these with a different icon? I edited the colour in the page css, can I do this there also?

Thanks

Kylie

[Support]

Hi Kylie,

To remove accordion header icons add following line of CSS to Customizer → Custom → CSS

.x-accordion-heading .x-accordion-toggle:before{content:"";}

Thanks

[Kylie M]

That was quick! Thank you so much!

[Support]

Hi Kylie,

You’re Welcome!

Thanks

[Kylie M]

Also is it possible to insert a different icon into each of the accordion headers before?

What are the CSS to Customizer → Custom → CSS instructions for the size of the header text?

Thanks

Kylie

[Support]

Hi Kylie,

Yes, you can of course insert a different icon into accordion headers by adding something like below into Customizer → Custom → CSS

.x-accordion-heading .x-accordion-toggle:before{content:"\f13d";}

You can find large set of icons at http://fortawesome.github.io/Font-Awesome/icons/. When you click on an icon, you will find its “unicode”.

The above unicode example of f13d comes from fa-anchor icon. Please make sure you put a “\” before the unicode as shown in above example.

For modifying the size of accordion header text, please add the following code in Customizer → Custom → CSS

.x-accordion-heading .x-accordion-toggle{
font-size:120%;
}

You can of course define your desired font size in percentage form.

Thanks

[Ma]

Hi,

Is it possible to achieve this with icons that come with the X theme? Can you please show me an example?

I understand if I did this it wouldn’t work:

.x-accordion-heading .x-accordion-toggle:before{content:”[icon type=”adjust”]”;}

but I don’t know another way to include in css form?

[Nico]

Hi There,

Try using this code.

.x-accordion-heading .x-accordion-toggle:before{content:"\f042";}

Hope it helps.

Thanks.

[Ben]

Is it possible to have a different icon for each accordion title? I am trying to list a process and have ten steps and would like 10 different icons, one for each header. Is this too ambitious?

[Friech]

Hi Ben,

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.

Cheers!

[jane_pattinson]

Hi,
I have replaced +/- icon on accordion headers with “\f0a9” using the below code. But after a while it reverts back to “f0a9” leaving out “\” in CSS and displays “f0a9” on the actual page. I’ve also tried using “\\f0a9” instead of “\f0a9” but still it reverts back and displays “f0a9” instead of the actual arrow icon. Any help is appreciated.

.x-accordion-heading .x-accordion-toggle:before{content: “\f0a9” !important;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
color: #359899;
font-size:20px;}

http://prntscr.com/85ucjd

[Nico]

Hi There,

Thanks for writing in.

Would you mind opening a new thread with you concern and share us your admin credential so we could investigate you current setup.

Don’t forget to set it as private message. You won’t be able to set it as private on the first post however on the 2nd you can.

Thanks.

[jane_pattinson]

Please check the thread #361796

[Rupok]

Hi @jane_pattinson

We’ll check the thread as soon as we reach on the queue. Please don’t comment on this thread.

Thanks

[Author]

Posts