WooCommerce Icon/Font Change
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello guys,

Inspecting the CSS hasn't really helped me, nor has looking at the php file, so I am just wondering where this thing comes from and where to edit it :)

awarded to Nuno Freitas

Crowdsource coding tasks.

3 Solutions

Winning solution

You can apply a style to

a.remove:before

E.g.

a.remove:before {
    color: blue;
}
It's using an icon from FontAwesome. You can also change the content property.
Nuno Freitas 3 years ago
Hi Nuno, glad to see you're here for the rescue, there will be 2 or 3 more questions coming up, so stay tuned if you like :) This is almost it. What if I wanted to change this x into a y let's say, or into a custom icon or a different text? Is this possible or is this a difficult fix?
Vyazhan 3 years ago
You can use any icon from https://fortawesome.github.io/Font-Awesome/icons/ If you click on an icon you will see a unicode. Just define the content property adding a backslash like a.remove:before { content: "\f00d"; } for example for a different cross.
Nuno Freitas 3 years ago
You can also place text on the content property, but in that case you may want to also change the font-family.
Nuno Freitas 3 years ago
Thanks a lot, this is excellent, I thought it was font awesome, but I never targeted something with it, so this will be good knowledge for the future, thanks a lot! :)
Vyazhan 3 years ago
Thank you, no problem!
Nuno Freitas 3 years ago

It is using Font Awesome for the icon and they have many different X icons

a.remove:before {
    content: "\f057";
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #e2401c;
    text-indent: 0;
    text-align: center;
}

If you would like to change it you just have to update the "content" variable. You can find all of the Icons that come with FontAwesome at this link. and any changes you make add !important after.

https://fortawesome.github.io/Font-Awesome/icons/

If you would like to change it from an X to a Y you would do this content: "Y" !important;"
3pic 3 years ago
Thanks anyways my friend, much appreciated! :)
Vyazhan 3 years ago
Thank you!
3pic 3 years ago

there is a class in woocommerce.css file wich is styling the element:

a.remove:before {
    content: "\f057";
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #e2401c;
    text-indent: 0;
    text-align: center;

}

oops, a bit late )
guy_do_or_die 3 years ago
Sorry, there will be more problems coming up momentarily :) Thanks for the help though, it's much appreciated!
Vyazhan 3 years ago
thanks for the tip. i'm looking forward to work it out )
guy_do_or_die 3 years ago
View Timeline