Change Icon On My_Account Dashboard

So hello I’m in a real crisis. How do I get this icon exchanged? I use Woodmart Child and the YITH WooCommerce Gift Cards plugin. Unfortunately I am not a CSS professional or PHP expert

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

Please provide your site admin access and icon URL which you want to insert instead, I will provide custom CSS.

Best Regards

Log In Page:

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-my-account-links .gift-cards-link a:before {
    content: " ";
    background-image: url(https://woodmart.xtemos.com/wp-content/uploads/2017/02/001-people.png?id=2450) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
	width:100%;
	min-height:100px;
}

Pleae replace this https://woodmart.xtemos.com/wp-content/uploads/2017/02/001-people.png?id=2450 for your image URL.

Best Regards

First of all, thank you very much for the help! Now I have one more question. If you move the mouse over the button, the icon turns black. I have created a second icon that is black and the ccs code with the associated file is given in the forums, but nothing happens on the attached photo is a screenshot if When I move the mouse over the other points, they turn black when I click the button “ORDERS”. How is the CSS correct here? That this is uniform.

The following code is from me:

body .woodmart-my-account-links .gift-cards-link a: before {

content: “”;

background-image: url (https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Grey_One.svg)! important;
background-image: height: 50px! important;
background-position: top center! important;
background-repeat: no-repeat! important;

width: auto;
min-height: 50px;
}

# background-image: hover {

background-image: url (https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Black_One.svg)
}

Attachments:

You must be logged in to view attached files.

Hello,

You use an image on as an icon, so you need the black line image and insert this code:

body .woodmart-my-account-links .gift-cards-link a:before:hover {
    content: " ";
    background-image: url(<strong>insert the black image URL instead this phrase</strong>) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
	width:100%;
	min-height:100px;
}

Best Regards

body .woodmart-my-account-links .gift-cards-link a:before {

content: ” “;

background-image: url(https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Grey_One.svg) !important;
background-image: height:50px !important;
background-position: top center !important;
background-repeat: no-repeat !important;

width: auto;
min-height:50px;
}

body .woodmart-my-account-links .gift-cards-link a:befor:hover {

content: ” “;

background-image: url(https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Black_One.svg) !important;
background-image: height:50px !important;
background-position: top center !important;
background-repeat: no-repeat !important;

width: auto%;
min-height:50px;
}

Hello,

Please explain what you want to do? Please remove all the custom CSS and add those I provided and check the issue.

Best Regards

The customer dashboard shows all icons in gray with a white background. As you can see, the icon for the “Gift Card” item has already been replaced by me. but if you move the mouse over the icon, it remains gray and does not turn black like the others. I created the icon once in gray and once in black, but even if I use one code alone, the color does not change as with the other icons, it should change color as soon as I go to the icon with the mouse, the icon of the Color gray in black. As with the second picture that is in the hang the mouse is over the point orders and this is colored black.

Attachments:

You must be logged in to view attached files.

here is a video of it

Hello,

Please remove this style from the SVG: https://prnt.sc/xznbpb, add width and height. You have inserted the code with a mistake- you specified width:auto%; that is not correct.

Best Regards

I have completely deleted the code and replaced yours and inserted the black icon. Now it shows the original icon again. The changes are now not accepted at all.

Hello,

I have corrected the CSS, please check now.

Best Regards

[Author]

Posts