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 over 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 over 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 over 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 over 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 over 3 years ago
Thank you, no problem!
Nuno Freitas over 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 over 3 years ago
Thanks anyways my friend, much appreciated! :)
Vyazhan over 3 years ago
Thank you!
3pic over 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 over 3 years ago
Sorry, there will be more problems coming up momentarily :) Thanks for the help though, it's much appreciated!
Vyazhan over 3 years ago
thanks for the tip. i'm looking forward to work it out )
guy_do_or_die over 3 years ago
View Timeline