How to add icon to accordion Title?

[dsthompson]

Hi. I am trying to add xicon info circle - FA f05a to my accordion title as shown in the attached image. I have tried using the following css and adding the class to the accordion as follows.

.info_icon a{
float: right; content: “\f05a”; font-size: 1.2em;
}

[accordion_item title=“Search Main Street” id=“inpage” clas=“info_icon”]

Not sure what I have wrong here.

Thanks

[Prasant]

Hello @dsthompson,

Thanks for asking.

Please add following CSS under Pro > Theme Options > CSS to add icons in accordion title:

If you want the icon to display on extreme right side of title, please add following CS:

.x-accordion-heading .x-accordion-toggle.collapsed:after{content: "\f05a";
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    float: right;
}

If you want to to have some spacing between icon and title, please use following CSS:

.x-accordion-heading .x-accordion-toggle.collapsed:after{content: "\f05a";
    font-family: "FontAwesome" !important;
    font-style: normal !important;
margin-left: 20px;}

Let us know how it goes.

Thanks.

[dsthompson]

Thanks much. The css references worked perfect! Is it possible to then add a mouse over extra to the displayed info-circle icon? I was hoping to use the extra as

[accordion_item title=“Search Main Street” id=“info_circle_left”] [extra href="#example" title=“How to Search” info=“popover” info_place=“right” info_trigger=“hover” info_content=“Use any/all the criteria to help you find the Partners that best fit your needs.” ] [x_icon type=“info-circle”] [/extra] [formidable id=136] [/accordion_item]

This works as is but would like to change the [x_icon type=“info-circle”] to use the icon now in the accordion header. Is this possible?

Thank you

[nabeel]

Hi again,

Can you please share the page URL in question so we can take a look?

Thanks!

[dsthompson]

Sure. It is https://mysalus.org/main-street/

thanks for taking a look.

[rad]

Hi there,

You need the same CSS but without collapsed styling, example,

#info_circle_left .x-accordion-heading .x-accordion-toggle:not(.collapsed):after {
    content: "\f05a";
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    margin-left: 20px;
}

Then just replace \f05a with your preferred icon code.

Thanks!

[dsthompson]

Thanks for that css. I added but the extra (mouse over) test does not display and not sure I am approching this corerctly - of if it is possible to use the [extra] to show text on info circle icon in accordion header? My html below

[accordion_item title=“Search Main Street” id=“info_circle_left”] [extra href="#example" title=“How to Search” info=“popover” info_place=“right” info_trigger=“hover” info_content=“Use any/all the criteria to help you find the Partners that best fit your needs.” ] [/extra] [/accordion_item]

Thanks

[lely]

Hi There,

I think there is a misunderstanding. Those CSS will only display the icon but will not add extra. Adding those function is possible with customization that is outside the scope of our support. Entire headline by default is clickable to reveal accordion item information. Adding another item with hover effect inside an already clickable item might need JS or restructuring of the existing element. You may consult a web developer to achieve this. Thank you for understanding.

[dsthompson]

OK, thank you

[Prasant]

You are most welcome.