Product tabs icon

How can we add an icon to the Product tabs items? We see this is possible in ‘Accordeon’ widget and which looks similar to Widget Product tabs, only different is no availability for adding an icon to item title in Product Tabs widget.

For example we want to add an icon next to the ‘extra information’ tab.

Attachments:

You must be logged in to view attached files.

Hello,

Use the code below for help:

.single-product .additional_information_tab .wd-tabs-title {
    position: relative;
    padding-left: 20px;
}

.single-product .additional_information_tab .wd-tabs-title:before {
    content: "\f11a";
    font-family: "woodmart-font";
    font-weight: 400;
    
    position: absolute;
    left: 0;
}

Define it in Theme Settings -> Custom CSS.

Kind Regards

Hi,

What should this do because we do not see any changes when we put this in and clear the cache?

Hello,

The code adds the icon before the tab – https://take.ms/wSc32

Send me admin access to your website to investigate it.

Kind Regards

Hi,

Please see private area for access.

Thanks!

Hello,

The above code is for the tabs. For the accordion use the below one:

.single-product .tab-title-additional_information {
    position: relative;
    padding-left: 20px;
}

.single-product .tab-title-additional_information .wd-accordion-title-text:before {
    content: "\f11a";
    font-family: "woodmart-font";
    font-weight: 400;
    
    position: absolute;
    left: 0;
}

https://take.ms/naddr

Kind Regards

If I se the below code for the ‘review’ tab in accordeon widget I get only a small square as an icon instead of a star icon.

/* Iconen reviews in tabs op single page */
.single-product .tab-title-reviews {
position: relative;
padding-left: 20px;
}
/* Iconen reviews in tabs op single page */
.single-product .tab-title-reviews .wd-accordion-title-text:before {
content: “\e915”;
font-family: “woodmart-font”;
font-weight: 400;

position: absolute;
left: 0;
}

Hello,

Try to use the code below:

.single-product .tab-title-reviews {
    position: relative;
    padding-left: 20px;
}

.single-product .tab-title-reviews .wd-accordion-title-text:before {
    content: "\f148";
    font-family: "woodmart-font";
    font-weight: 400;
    
    position: absolute;
    left: 0;
}

The Unicode for icons you can find in Theme Settings – https://take.ms/a9VOd

https://take.ms/K2TpNv

Kind Regards

[Author]

Posts