Change Accordion Up/Down Icon

[icecast]

any suggestions to change .spb_accordion icon from triangle to chevron down and chevron up ?

<span class=”ui-accordion-header-icon ui-icon ui-icon-triangle-1-e”></span>

[Rui Guerreiro – SUPPORT]

Hi,

Try to add the code bellow to your custom css options.

.spb_accordion_section > h4 .ui-icon:before{
         content: "\02C5"!important;
         font-size: 35px!important;
}
.spb_accordion_section h4.ui-state-active .ui-icon:before{
    content: "\02C4"!important;
    font-size: 35px!important;
}

Hope that helps

– Rui

[icecast]

the result is kinda strange, any suggestions to use fontastic svg icon below instead?

<svg class=”icon-chevron-down-1″><use xlink:href=”#icon-chevron-down-1″></use></svg>

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

That seems to be cropped. I changed in my installation before send it to you and worked fine.
Can you send me your website url, if necessary use the private reply option.

– Rui

[icecast]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

will forward this to the developer to see if it’s possible.

– Rui

[Swift Ideas – Ed]

Hi @icecast,

I don’t think this would be possible within the shortcode.. You’d likely need to either use jQuery to replace the HTML on .ready, or alternatively modify the background content via CSS. I guess you need to use the SVG tag though?

– Ed

[icecast]

This reply has been marked as private.

[Swift Ideas – Ed]

If you have to use the svg tag, then you’d need to write some jQuery to replace the code, as this is dynamically added with the accordion script. Possible, but would need more than a few minutes to write and test!

– Ed