Change icon location in accordion

[texaskiwi13]

This is a bit of a random question but is there a way to move the icon in an accordion so that it is below the text. For example, I would like it to read

Death by Medication Error
(down carrot)

then when they click it it toggles more information open.

Note, if this is not possible, is there a way to fake it by putting an icon that doesn’t animate under the headline text so it at least indicates that you can click for more info?

http://staging.veriphi.flywheelsites.com/the-problem/

Thanks!
Ashley

[tristup]

Hi Ashley,
Thanks for reaching out.

Regretfully, currently, there are no such options to add the icon below the Accordion title, it only can be added to reverse to the title. But you can try by removing the Indicator and add the HTML with an icon in the title.

In this way, you can add an icon with the title, but the icon will as a part of the text, and no animation can be applied to it.

Thanks

[texaskiwi13]

Thanks for that! I’m happy to fake it this way as I indicated above, but this isn’t working. The icon is not showing up.

Death from Medication Error
<i class="fa fa-angle-down"

Any ideas?

[marc_a]

Hi @texaskiwi13,

Your code <i class="fa fa-angle-down" is missing the closing tag of ><i>, your code should be looking like this <i class="fa fa-angle-down"><i> but you need to install the font-awesome CDN file to make it work. I suggest that you will use our pre define icon shortcodes.

Then in your header Accordion Item header instead of using this code:

<p>Death from Medication Error <br/><i class="fa fa-angle-down"></li></p>

You will use this code below.

<p>Death from Medication Error <br/>[x_icon type="angle-down"]</p>

You can find the lists of our icons on our docs, please check this out.
https://demo.theme.co/integrity-1/shortcodes/icons/

Hope that helps.

Thank you.