Change quick view icon

Hi there,

I want to change the quick view button icon with another custom icon.
Can you please help me?

thanks in advanced

Hello,

To change the quick view button on the products you need to add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-grid-item .wd-action-btn.wd-quick-view-btn > a::before {
content: "\f125";
font-family: "woodmart-font";
}

Best Regards.

Hi there,

i have allready insert the above custom css in my theme setings, but when i try to change “\f125” in to something like “\f333”, i got the attached image below.

Any ideas?

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. You need to replace the font family of the icon in the CSS as well to make it work.

From which website are you trying to use icons from??

Because, Only font awesome 4.70 icons are supported. https://fontawesome.com/v4.7.0/

Best Regards.

Hi again,

well i try to do what you are adviced me but i get the same issue.
I want to replace with the “eye” icon font so i move to font awseome icon web page (https://fontawesome.com/v4.7.0/icon/eye) and i took Unicode: f06e.

Then i move to my Theme settings> custom css and i insert the following css:

.product-grid-item .wd-action-btn.wd-quick-view-btn > a::before {

content: “\f06e”;

font-family: “woodmart-font”;

}

After clear cache i got the same issue.
So, whats wrong?

Maybe i have to change and the line:

font-family: “woodmart-font”;

with something else…is thats right?

Hello,

As I mentioned in my previous reply you need to replace the font-family as well to “fontawesome”. Then clear cache and check back.

Note: Our theme supports only a set of icons of font awesome. If you want to use all the icons then you need to import the library manually only then you can use all the icons.

Best Regards.

[Author]

Posts