Add Icon Images to tabs

Hi mineralman, I can see your style being applied and if I change it to 2em the icons move over to the right accordingly. To shrink the icons on mobile you will need a suitable @media query to apply a new set of styles for your chosen screen size.

Got it to work but I used margin-left: ##px; and that seemed to work the best.

Hi Matt,
i have tried to use these codes into my page:

[tabs title=”Tutors” disabled=”false” collapsible=”false” active=”0″ event=”mouseover”]

[tab title=”Teacher Yanyan” icon=”https://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacheryanyan.jpg” iconw=”64px” iconh=”64px”]Tab 0 content[/tab]

[tab title=”Teacher Chris” icon=”https://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherchris.jpg” iconw=”64px” iconh=”64px”]Tab 1 content[/tab]

[tab title=”Teacher Kara” icon=”https://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherkara.jpg” iconw=”64px” iconh=”64px”]Tab 2 content[/tab]

[/tabs]

i wasn’t able to get an image to my tabs. i like to be something like this: https://www.jpreserv.learnasia.asia/wp-content/uploads/2014/Untitled1.jpg

here is my site: https://www.jpreserv.learnasia.asia/make-schedule/

I am new to wordpress, thank you very much.

Hi danteangeles,

Just as a heads-up it’s generally better to start your own thread rather than posting on the end of someone else’s post, unless you have the same problem.

The reason your code is not working is because you are using the stable version. The icon support was added to a non-stable development version that mineralman tested. The icon support is coming in the next release (which is still a way off as I am incredibly busy with work at the moment).

If you read this full thread you will find a link to the development version, and instructions on how to install it and use it.

Thank you very much for your reply.

Hi Matt,
I just want to inform you that these codes:

[tabs title=”Tutors” disabled=”false” collapsible=”false” active=”0″ event=”mouseover”]

[tab title=”Teacher Yanyan” icon=”https://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacheryanyan.jpg” iconw=”64px” iconh=”64px”]Tab 0 content[/tab]

[tab title=”Teacher Chris” icon=”https://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherchris.jpg” iconw=”64px” iconh=”64px”]Tab 1 content[/tab]

[tab title=”Teacher Kara” icon=”https://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherkara.jpg” iconw=”64px” iconh=”64px”]Tab 2 content[/tab]

[/tabs]

that i used before is fully functional. Its working now on my site. Thank you very much. I just change the stable version to the developer version you have uploaded here.

and to other people, i’d like to inform you all that any shortcode that you will put inside the content area will work, and it works very fast.

Matt, is there anyway you could put some effects here like one tab will get active at a specified time and after that the next one will be activated, just like a carousel? but once the mouse cursor is on the content it will pause. just wondering.
Thank you very much again.

Hi danteangeles,

I’m not sure that tabs are the best kind of widget to do a carousel with. The exact behaviour you describe is available in the horizontal accordion widget already, but tabs that cycle themselves seems odd to me. If there’s a call for it then I expect I could add it in as a feature.