The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Squelch Tabs and Accordions Shortcodes
[resolved] Icons in tab title? (6 posts)

  1. mariusfv
    Posted 2 years ago #


    I'm interested to add icons in tab title, I've read this post: https://wordpress.org/support/topic/add-icon-images-to-tabs?replies=23 .

    My questions is: It's that function(add icon in tab title) an available option in your plugin or still remains only via manual customization?

    I can buy or donate for a stable plugin with this function: add icon into tabs title.

    I wait you answer as soon as possible.


  2. Matt Lowe
    Plugin Author

    Posted 2 years ago #

    The functionality is in the stable branch now. You can do something like

    [tab title="Tab One" icon="http://yourwebsite.com/wp-content/uploads/2014/05/12/icon_one.png"]
    Tab content here
  3. erh
    Posted 2 years ago #

    Hi Matt,

    Is this feature also available on Toggles and Accordions?

    The documentation seems to imply there isn't, as I don't see the "icon" option under accordions:

    If not, do you have plans to make it available for Accordions/Toggles?


  4. Matt Lowe
    Plugin Author

    Posted 2 years ago #

    No, only available on tabs at the moment. If there's a demand for it on other widgets then I'll add it to the development queue.

  5. gvsystems
    Posted 2 years ago #

    I have a related question regarding icons on the tabs. Is it possible to change the state of the icon or text when a pointer is hovered over the tab? Or on an active tab? One thing I tried was to leave the tab shortcode completely blank (other than the content) and use a sprite to add background images via CSS and alter the width and height of the tabs to allow for the complete parts of the image I needed for the respective tab.

    This worked as far as adding the images to the tabs, however there is some weird behavior to the tabs now. Hovering over the first tab causes the pointer to change into a text cursor (tab title="" is empty), while the other two tabs retain the regular mouse pointer on hover (title="" also empty). Additionally, clicking tabs 2 and 3 do not change to the content for those tabs and the content seen remains the content for tab 1.

    Most probably, my css paths are wrong or I have botched something somewhere. So I guess my question is, is there any way within the plugins' features to add hover and active state icon/text/background changes using sprites? For instance, through the event="" feature. If not, what are the direct css paths for adding a background sprite for default/active/hover states for each tab id?

    I hope my question makes sense. I'm fairly new to CSS.

    Your plugin so far is awesome and I hope there is a way to add this hover and active tab state change. I'm sure there is, I am just a newbie and missing something.

    This is the code I used to add the sprite image to the backgrounds:

    #ui-id-1 {
    	background: url('/uploads/2014/08/homemainsprite500x150.png');
    	background-position: 0 0;
    	width: 193.3333333px !important;
    	height: 50px !important;
    #ui-id-2 {
    	background: url('/uploads/2014/08/homemainsprite500x150.png');
    	background-position: -236px 0;
    	width: 193.3333333px !important;
    	height: 50px !important;
    #ui-id-3 {
    	background: url('uploads/2014/08/homemainsprite500x150.png');
    	background-position: -460px 0;
    	width: 193.3333333px !important;
    	height: 50px !important;

    No link to my site ATM as it is in construction mode. If you need a pass, let me know. Thanks again.

  6. I have a related question regarding icons on the tabs.

    Rather than tagging onto someone else's topic per the forum welcome can you please start your own?


    This one is months old and marked "resolved" already.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Squelch Tabs and Accordions Shortcodes
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic