change the colors and size of the icons

Hello
how can I change the colors and size of the icons in the header and the font size on the card?

Attachments:

You must be logged in to view attached files.

Hi apostolis_filippou,

Thanks for reaching to us.

Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to below Custom Class https://prnt.sc/io-tdHNTYyPz

div.wd-tools-element>a

Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

Regards,

I had sent these SMS to change the icons, they were working normally and now they are not working, why?

.wd-my-account-links .orders-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/orders-icon1.svg”);
content: “\f004” !important;
}
.wd-my-account-links .conversations-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/conversations-icon1.svg”);
content: “\f004” !important;
}
.wd-my-account-links .offers-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/offers-icon2.svg”);
content: “\f004” !important;
}
.wd-my-account-links .purchase-lists-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/purchaselists-icon1.svg”);
content: “\f004” !important;
}
.wd-my-account-links .bulkorder-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/bulk-icon1.svg”);
content: “\f004” !important;
}
.wd-my-account-links .subaccounts-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/subaccounts-icon1.svg”);
content: “\f004” !important;
}
.wd-my-account-links .downloads-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/transformations-icon1.svg”);
content: “\f004” !important;
}
.wd-my-account-links .edit-address-link a:before {
background-image: url(“https://test.the89group.com/wp-content/uploads/2025/06/address-icon1.svg”);
content: “\f068” !important;
}

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

Hello, ok

Hello,

Please comment out (or remove) the previous custom CSS you added for the account page icons. Once it’s disabled, I will re-check the icons on your site and provide the correct working code.

Best Regards,

ok I removed them

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS:

.wd-my-acc-orders .wd-nav-icon:before {
    content: "" !important; /* remove font icon only */
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/orders-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-conversations .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/conversations-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-offers .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/offers-icon2.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-purchase-lists .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/purchaselists-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-bulkorder .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/bulk-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-subaccounts .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/subaccounts-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-downloads .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/transformations-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.wd-my-acc-edit-address .wd-nav-icon:before {
    content: "" !important;
    background: url("https://test.the89group.com/wp-content/uploads/2025/06/address-icon1.svg") no-repeat center/contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}

Best Regards,

ok it worked thank you very much! now I’m attaching an image for you to tell me how to change icons here or remove what I don’t want

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I can further check on your site and give you a possible solution?

Best Regards,

Hello,

https://test.the89group.com/product/inventor-emperor-klimatistiko-inverter-18000-btu-a-a-me-ionisti-kai-wifi/

it is when you click on the image of a product and it opens in the whole window

Hello,

Could you please share a screenshot highlighting the specific icon you want to change in the image popup? This will help us better understand your requirements and assist you more accurately.

Best Regards,

I had sent it to you, I want to change all the icons and remove some.

Hello,

Could you please share a screenshot highlighting the specific icons you want to change or remove in the image popup?

Best Regards,

Hello,
These are

Hello,
These are!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry, but there is no option in the theme settings available for that.

It requires customization, and this is beyond our limitations and support policy.

Best Regards,

Breadcrumbs & Products navigation on desktop shows it completely and in the product we are in while on tablet and mobile no why? We want it to work on tablet and mobile as it works on desktop, can you do it? Thank you

Hello,

Please share some screenshots for better understanding that demonstrate the problem so we can understand and reproduce it on your website. Also share the page URL of your site.

Best Regards,

good morning
I have underlined what I am saying that it does not look the same on desktop and mobile

https://test.the89group.com/product/iliakos-thermosifonas-diana-classic-120-lt/

Attachments:

You must be logged in to view attached files.

Hello,

I have checked your site and it is showing full on mobile:

See this screenshot: https://ibb.co/BK6VdSPV

Best Regards,

Now I checked it from my iPhone 12 and it doesn’t show it.

The name of the product is not written like on the desktop.

Hello,

To fix this issue, you need to add the following custom code.

body .wd-el-breadcrumbs :is(.woocommerce-breadcrumb,.yoast-breadcrumb) .wd-last {
	display: inline-block;
}

body .wd-el-breadcrumbs :is(.woocommerce-breadcrumb,.yoast-breadcrumb) .wd-last-link {
    color: var(--color-gray-500);
    font-weight: 400;
}

body .wd-el-breadcrumbs :is(.woocommerce-breadcrumb,.yoast-breadcrumb) .wd-last-link ~ span {
	display: block;
}

Best Regards,

[Author]

Posts