This isn’t supported directly by the plugin, and the Tabby Responsive Tabs Customiser add-on can help produce custom styles without coding, but it doesn’t include anything to add images or target specific tabs.
You can however use some custom css to achieve what you have described by applying an image background to each tab and hiding the text. You will probably also want specify an alternative image to be show to indicate when the tab is selected.
The index numbers for tablist and tab in the selectors below indicate which tab group on the page and which tab in that tab group is being selected.
for example:
#tablist1-tab1 {
background: url("images/jake.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab2 {
background: url("images/milo.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab3 {
background: url("images/bella.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab4 {
background: url("images/fizz.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab1.responsive-tabs__list__item--active {
background: url("images/jake-alt.png");
border: none;
}
#tablist1-tab2.responsive-tabs__list__item--active {
background: url("images/milo-alt.png");
border: none;
}
#tablist1-tab3.responsive-tabs__list__item--active {
background: url("images/bella-alt.png");
border: none;
}
#tablist1-tab4.responsive-tabs__list__item--active {
background: url("images/fizz-alt.png");
border: none;
}
If you have tabs on more than one page you should also add a body class in front of each selector so that any tabs on other pages aren’t affected by these styles.
The recommended way to use add css to target the tabs is outlined in the plugin’s documentation.
