How to add custom icons for tabs?

Hi, the theme is awesome! I would like to add custom icons for tabs, also I would like to have the custom icons centered below the text. There is an option to add icons before or after text only. Please check the screenshot for the current tabs.

If you could provide css codes that would be helpful. Thank you

Hello,

Try to use the following piece of code to change it

.vc_tta.vc_general.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list {
    display: flex;
    display: flexbox;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.vc_tta.vc_general.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tab {
    display: flex;
    display: flexbox;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    align-items: flex-start;
    -ms-align-items: flex-start;
    -webkit-align-items: flex-start;
}
.vc_tta.vc_general.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tab > a {
    display: flex;
    display: flexbox;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -webkit-align-items: center;
    -ms-align-items: center;
    flex-direction: column-reverse;
    align-items: center;
}
.vc_tta.vc_general.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tab .vc_tta-title-text {
    margin-left:0;
    margin-right:0;
}
.vc_tta.vc_general.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tab .vc_tta-icon {
    line-height: 1.1;
    margin-top: 10px;
}

Regards

Hi, I have added the code to custom css but nothing changed, also the formula “display: flexbox;” seems not ok. Do you know what to change or how to fix?

I haven’t got answer regards to the custom icons. That is more important than the icons below the text. Could you please let me know how can I use custom icons on tabs?
Thank you
Gabor

What element do you use for tabs? Try to replace previous code with a new one

.vc_tta.vc_general.vc_tta-tabs .vc_tta-tabs-list {
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.vc_tta.vc_general.vc_tta-tabs .vc_tta-tab {
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    align-items: flex-start;
    -ms-align-items: flex-start;
    -webkit-align-items: flex-start;
}
.vc_tta.vc_general.vc_tta-tabs .vc_tta-tab > a {
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -webkit-align-items: center;
    -ms-align-items: center;
    flex-direction: column-reverse;
    align-items: center;
}
.vc_tta.vc_general.vc_tta-tabs .vc_tta-tab .vc_tta-title-text {
    margin-left:0;
    margin-right:0;
}
.vc_tta.vc_general.vc_tta-tabs .vc_tta-tab .vc_tta-icon {
    line-height: 1.1;
    margin-top: 10px;
}

And unfortuantely, Visual Composer doesn’t have custom icons for tabs functionality.

Regards

Ok, thanks, i have chanegd but not ok, I will inspect the site and check css.

Reg custom icons for tabs:
Is there a way to change by css?
Here is your post below to show how to change for menu.
http://xtemos.com/forums/topic/custom-png-icons-in-menu/
Could you please help to do the same on tabs?
Thanks

In this case, we have to see your web-site first then we will be able to prepare a right code snippet for icons position and custom PNG icons on the tabs title.

Hi, i have managed to upload a dev site, please check here: http://dev.ledlam.co.uk
Also could you please check the previous code as well, it doesn’t work.
Thanks

Also I would like to increase the tabs height to about 100px
and use bigger icons
something like this below:

Could you please help how to achieve this?
Thanks

We have tested the code we gave you on your web-site and it works perfect

As for PNG icons for each tab you can use this code snippet.

.vc_tta.vc_general .vc_tta-tab a span:after {
    content: " ";
    display: block;
    width: 40px;
    height: 40px;
    margin-top: 6px;
    background-size: contain;
    background-repeat: no-repeat;
}
.vc_tta.vc_general .vc_tta-tab:nth-child(1) a span:after {
    background-image: url(http://image.flaticon.com/icons/png/128/149/149200.png);
}
.vc_tta.vc_general .vc_tta-tab:nth-child(2) a span:after {
    background-image: url(http://image.flaticon.com/icons/png/128/149/149200.png);
}
.vc_tta.vc_general .vc_tta-tab:nth-child(3) a span:after {
    background-image: url(http://image.flaticon.com/icons/png/128/149/149200.png);
}
.vc_tta.vc_general .vc_tta-tab:nth-child(4) a span:after {
    background-image: url(http://image.flaticon.com/icons/png/128/149/149200.png);
}
.vc_tta.vc_general .vc_tta-tab:nth-child(5) a span:after {
    background-image: url(http://image.flaticon.com/icons/png/128/149/149200.png);
}

Don’t forget to remove Visual Composer icons before using PNG.

[Author]

Posts