Support » Plugins and Hacks » [Resolved] Add Icon Images to tabs

[Resolved] Add Icon Images to tabs

  • Hey Matt, I was wondering if there is a way to add a small image to the tabs. Not a BG Image, but an image to the left of the tab text.

    [tab title=”GMO NEWS”]

    Inserting a small image to the left side of the words – “GMO NEWS”

    The following does the trick outside of the tabs in Content or in a normal page:
    <img style="margin-top: 0px;margin-right: 8px; margin-bottom: -8px;" alt="GMO News" src="http://nutritionap.com/wp-content/uploads/2013/06/Fresh-Food.jpg" width="36" height="28">GMO NEWS

    Is there a way to incorporate that into the actual tabs?


Viewing 15 replies - 1 through 15 (of 22 total)
  • Plugin Author Matt Lowe


    Hmm… You could add an image with CSS like so:

    .squelch-taas-override.ui-tabs .squelch-taas-tab {
        padding-left: 42px;
        background: url(http://nutritionap.com/wp-content/uploads/2013/06/Fresh-Food.jpg) 0 center no-repeat;

    That however would apply to ALL of the tabs, if you wanted different icons on each tab then it gets more interesting as there isn’t a class on each tab label to specify which tab it is (I should probably add that in).

    Other than that, no, there’s no way to add icons to the tabs. If this is something you need then I can add it, I don’t think it would prove to be too hard to add an extra attribute to the [tab] shortcode to allow an icon to be placed before the tab text.

    Plugin Author Matt Lowe


    Hi Mineralman,

    I’ve added in icon support. Would you be willing to test it before I make it available in the stable version? You can download the latest version here:


    I’ve updated the docs to reflect the new options: http://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/

    But to summarise:

    (url) Link to an icon to show on the left hand side of the tab
    Default: "" (no icon)
    (text) The alt text to add to the icon (for screen readers and search engines)
    Default: Title of the tab
    (integer) Width of the icon
    Default: Width not explicitly set, let browser size image automatically
    (integer) Height of the icon
    Default: Height not explicitly set, let browser size image automatically

    If you could check it out and let me know how you get on I’d greatly appreciate it.

    I downloaded the .zip. Uploaded through Wp Plugin upload.

    Unpacking the packageā€¦

    Installing the pluginā€¦

    Destination folder already exists. /home/*********/public_html/wp-content/plugins/squelch-tabs-and-accordions-shortcodes/

    Plugin install failed.

    Return to Plugins page

    This is how I set the tab title to:

    [tab title="GMO NEWS" icon="http://nutritionap.com/wp-content/uploads/2013/06/Fresh-Food.jpg"]

    Plugin Author Matt Lowe


    Hi Mineralman,

    When uploading a plugin you have to remove the old version first. So deactivate and then delete the old version, then upload and install the new version.


    In and Working. Seems now to line up text and icon image and Change BG inactive tab color to #FFFFFF. Any suggestions on

      moving the text up

    or the image down?


    Plugin Author Matt Lowe


    Hm, I don’t see that behaviour in my test lab… let me investigate.

    Plugin Author Matt Lowe


    Your template is the culprit. I think something like this should see you right:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {
        height: 28px;
        vertical-align: middle;

    All thats left is changing the inactive tab BG color to #FFFFFF

    I have the hover tabs bg already, just cant figure out the inactive state so the tab color is white all the time

    Plugin Author Matt Lowe


    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {
        height: 28px;
        vertical-align: middle;
        background-color: #fff;

    OK. THis is the code used to get icon on tabs, BG Nav Bar color change and Active Tab Color White:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li {font-size:85%;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a {color: #FF1C33;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-state-hover a {color: #FF1C33;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav {background-image: none;background-color: #A8E71E;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-state-hover a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;background-color: #FFFFFF;}

    Q: Can the Icon images placement be adjusted to the left using padding or margin?

    Here is the Tab usage:

    [tab title="US" icon="http://nutritionap.com/wp-content/uploads/2013/01/MiniQRCodeKTGH-e1375271076869.jpg"]

    Works great. If I could adjust the image horizontally I might not need to create a new mobile version of tabs. (to avoid stacking tabs on mobile portrait devices)

    Plugin Author Matt Lowe


    Hi Mineralman,

    You should be able to achieve that with something like this:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {
        margin-left: 2em;

    No luck moving the icon:



    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {margin-left: 0em;}


    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {margin-left: 0em !important;}

    Plugin Author Matt Lowe


    Hi mineralman … what is your goal? Setting margin-left: 0em; will typically do nothing (unless your theme has set a style for that image).

    my goal was to be able to adjust image placement as needed. I used 2em, 1em and 0em as values but none worked to move the image.

    On mobile the responsive tabs want to stack, so If I an shrink the icon image spacing maybe I can use the same [tabs} for small tablets and phones and not have the actual tabs stack.

    If it can be done, great! If not, no worries, I adapt well

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Resolved] Add Icon Images to tabs’ is closed to new replies.