Jump to content

Add Icon Images To Tabs Instead Of Text

tabber images background formatting

This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 Guest_Russell_*

  • Guests

Posted 27 November 2012 - 12:26 PM

Hey there,

My partner initiated a topic on this subject a while back, but I haven't seen anything happen with it, so I am starting a new one.

The problem is this:

We would like to add image icons to each of the tabs instead of text. He had tried a solution involving pseudo classes, but it would only work in FireFox. Does anybody have any insight for a cross browser method which will allow us to place icon images on the tabs instead of text?

We have a widget on a sandbox section of our site at www.stoked dot org/text-hierarchy

Any help or insight you can provide would be GREATLY appreciated.


#2 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,533 posts

Posted 27 November 2012 - 01:24 PM

Hi RC,

Have you tried adding the image directly into the image title area?  So you'd enter something like <img src="imagelocation.jpg">.  Give that a try and then let us know how it goes.



#3 Guest_RC_*

  • Guests

Posted 27 November 2012 - 05:01 PM

Good idea-- thanks for the suggestion.

Unfortunately, while the icon DOES appear correctly when I use an <IMG> in the tab title, it breaks the tab functionality so that just the contents of the first tab stay up regardless of what tab you click. This is remedied when you replace the image with text. I tried to place a new div into the title, and then use the image as the background of that div, but that didn't fix it either.

Any ideas?

Thanks a ton...

#4 Guest_RC_*

  • Guests

Posted 03 December 2012 - 11:08 AM

Hey there --

Any feedback on this?