Accordion: Icon before the tab name?

[thosch71]

Hi there,

is it possible to have an icon left of the tab name in the accordion? I remember somebody already speaking about it in the comments section on your themeforest page, but I can’t find it. Google didn’t bring any results either 🙁

I already tried icon shortcode and <i class=”icon-iconname”></i>, but then the name is set to ‘Section’ (default).

Any help or hint how to do that would be nice.

Greetings,

thosch

[Ben – SUPPORT]

I can’t seem to get it working, I’ll try and get cosmin in here to help.

Thanks
Ben

[thosch71]

Bump!
Did you take a look at this already?

Best greetings,

thosch

[Cosmin – SUPPORT]

Hi Thosch,

First of all, apologies for the delay, will do my best to not happen again 🙂

Now, the solution to this is a bit tricky. You’d need to specify custom CSS for each accordion heading that you have. The following solution will work if you only have one accordion group in only one page on your site:

h3.ui-accordion-header:before {
    float: left;
    font-family: FontAwesome;
    line-height: 38px;
    margin: 0 20px;
}

That’s something to style them all so we don’t write it a lot of times.

Now, for the first accordion heading:

#ui-accordion-1-header-0:before {
    content: "\f002";
}

That would give you the search icon. Here are all the options available: http://fortawesome.github.io/Font-Awesome/cheatsheet/
You take starting from the “f” in the parenthesis and add a \ in front of it.

The code for the second heading would be:

#ui-accordion-1-header-1:before {
    content: "\f002";
}

Note it changed from header-0 to header-1… and so on.

If you have multiple accordion groups or are using accordions on multiple pages, let me know, there’s a different thing to do there.

Hope this helps.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[thosch71]

Hi Cosmin,

thanks a lot for helping me out! Works like a charm for me and isn’t tricky at all.
I have got only accordion group on the website right now. But I don’t know if I need another one on a certain page. If it isn’t too much hassle, I’d be very grateful, if you let me know the other solution as well.

Thanks again!

PS: Nevermind on being a bit late with the answer… I guess you have quite a bit to do with answering all the forum posts, haven’t you. My site is still on dev-status anyway, so all’swell
🙂

[Ben – SUPPORT]

You wont have to change anything to make it work on multiple accordions if that’s what you mean?

Thanks
Ben

[thosch71]

Hi Ben,
you are right, if I want to have the same Icons in every other accordion section. If I have another accordion on another page with different icons, then this solution doesn’t work.

Best greetings,

thosch

[Cosmin – SUPPORT]

Hi Thosch,

If you have multiple pages with accordions, you will need to modify that CSS and specify it for each page.

First, get the page ID of your first page with accordions. You can do this by viewing the page source when on your site (right click>view source) and checking the body tag: http://cl.ly/image/0S3j3L3g3X2A

In my example, it’s page-id-570, so the last two sections of code that I gave you, would be:

.page-id-570 #ui-accordion-1-header-0:before {
    content: "\f002";
}

and

.page-id-570 #ui-accordion-1-header-1:before {
    content: "\f002";
}

Now let’s say I have another page, with ID 571. My class would be page-id-571, so I would need to add this as well, to make it work for this new page:

.page-id-571 #ui-accordion-1-header-0:before {
    content: "\f002";
}

and

.page-id-571 #ui-accordion-1-header-1:before {
    content: "\f002";
}

And so on… hope this helps 🙂

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[thosch71]

Cosmin!

You made my day!

Thanks a lot for pushing me in the right direction…. i already tried out sth. similar, but it didn’t work out!

Top notch support, guys….

Best greetings,

thosch

[Cosmin – SUPPORT]

Glad to hear that helped, Thosch 🙂

If I haven’t mentioned this before and you like the product and support, please do rate the theme in your ThemeForest Download section, we would greatly appreciate it!

Regards,

————————————————————————————————————

Cosmin
Support Assistant