I would like to change the my-account icons to font awesome icons.

This topic has 6 replies, 2 voices, and was last updated 3 years, 7 months ago by Aizaz Imtiaz Awan.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 21, 2021 at 8:45 pm #285248

Skimi
Participant

Do you have a list of all the font awesome icons that I can load into the theme? I realized that some are there, but not all. Or can I post the icons here and you can add them to your library?

Thank you
Skimi

April 22, 2021 at 9:45 am #285466

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry but there is no list available.

You can try using icons from the following link:
https://fontawesome.com/v4.7.0/cheatsheet/

Then you need to use Custom CSS to change the icons to your required once. Please provide the URL of the website with some relevant screenshot of which icon you want to change to check it myself and provide you with CSS for that.

Regards.
Xtemos Studios

April 22, 2021 at 10:21 am #285489
Skimi
Participant
Hello Aizaz, thanks for your reply and the list with 4.7 icons. I’ve tried it with following CSS, but I get a white space instead of an icon.:
```
.wd-my-account-links .wishlist-link a:before {
    content: "\f004";
    font-family: "Font Awesome 5 Free";
}
.wd-my-account-links .my-tickets-link a:before {
    content: "\f128";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .orders-link a:before {
    content: "\f290";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .downloads-link a:before {
    content: "\f019";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .payment-methods-link a:before {
    content: "\f19c";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .edit-address-link a:before {
    content: "\f278";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .edit-account-link a:before {
    content: "\f05a";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .customer-logout-link a:before {
    content: "\f08b";
    font-family: 'Font Awesome 5 Free';
}
.wd-my-account-links .wc-smart-coupons-link a:before {
    content: "\f029";
    font-family: 'Font Awesome 5 Free';
}
```
Thank you
Skimi

Attachments:
You must be logged in to view attached files.
April 22, 2021 at 11:55 am #285533

Aizaz Imtiaz Awan
Keymaster

Hello,

Please Go to Theme Settings >> Performance >> CSS >> Font Awesome Library >> Set it to always use.

Screenshot for Clarification: https://ibb.co/J3gzNHq

Then clear cache and check back.

Regards.
Xtemos Studios

April 22, 2021 at 12:29 pm #285548

Skimi
Participant

Hello Aizaz,

I did, but the icons still not appear. Only the heard icon for the wishlist-link. Like on the picture I’ve sent above.

Skimi

April 22, 2021 at 4:09 pm #285625

Skimi
Participant

Okay, I’ve fixed it with the icons I found via the console. Would be nice, if all the 4.7 icons would be available. But I am fine now 🙂

Thank you
Skimi

Attachments:
You must be logged in to view attached files.

April 23, 2021 at 5:25 am #285761

Aizaz Imtiaz Awan
Keymaster

Hello,

I saw the screenshot you attached.

We are glad that you managed to find a solution for yourself.

Our theme supports only a set of font-awesome icons that’s why all are not working.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.
Author

Posts