This is possible. You should not need to add any php code, but you will need to add some css to the stylesheet of your child theme, and of course add the png graphics. The method I am going to describe uses the feature I added in the latest update to tabby responsive tabs that adds an ‘icon’ parameter to the shortcode to allow font awesome icons to be included within the tab titles. We can make use of the classes that are added when this shortcode parameter is used, and instead of adding webfont icons add the png images of flags.
You would add the icon parameter to a tabby shortcode with a value for the icon parameter to identify the flag, eg:
[tabby title="United Kingdom" icon="uk"]
This adds the additional classes ‘fa’ & ‘fa-uk’ to a new span that is inserted before the content of the title of the ‘United Kingdom’ tab. If you add some CSS rules to target this, it is possible to add the flag as a background graphic before the title.
eg:
li.responsive-tabs__list__item span.fa {
background-size: 100% 100%;
display: inline-block;
width: 32px;
height: 32px;
position: relative;
top: 8px;
}
li.responsive-tabs__list__item span.fa-uk {
background: url('images/uk.png') no-repeat left;
}
You can then add as many additonal flags as you wish by adding one new rule for each – assuming all of your flag pngs are the same size as defined in the rules for the fa class:
li.responsive-tabs__list__item span.fa-usa {
background: url('images/usa.png') no-repeat left;
}
If the usa.png and uk.png images are present in the /images folder of the child theme,these should display in the tabs that have icon=”usa” and icon=”uk” parameters included in their shortcodes.
