Font Awesome Icon not visible

This topic has 8 replies, 2 voices, and was last updated 2 years, 4 months ago by Aizaz Imtiaz Awan.

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

Author

Posts
December 11, 2022 at 8:36 pm #428012

steve
Participant

Hi there 🙂

Got some probs with the Font Awesome Unicode.

I opt-in Font Awesome library “always” in the theme settings.

I want to replace the hook with a full heart when the product is already on the wish list. Unfortunately, it does not show me anything now. The code for the solid heart is f004 (see pictures).

I find the hook very misleading, especially if someone has something on the wish list AND on the comparison list – then there are two hooks next to each other.

Thanks for your help 🙂

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

December 11, 2022 at 8:41 pm #428017

steve
Participant

_

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

December 11, 2022 at 8:48 pm #428020

steve
Participant

Hmm okay, if i replace it with a random number over 100 like \f116 there is an icon. But what happened with the hearts? 🙂

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

December 12, 2022 at 4:32 pm #428206

Aizaz Imtiaz Awan
Keymaster

Hello,

Can you please share the WP admin login details of your site so I will check and solve the issue.

Best Regards.

December 12, 2022 at 5:11 pm #428229

steve
Participant

Here it is 🙂

December 13, 2022 at 11:35 am #428394
Aizaz Imtiaz Awan
Keymaster
Hello,

The Filled Heart Icon is now updated on your Site for the Saved Wishlists: https://snipboard.io/EHvNnd.jpg

Following Custom CSS has been applied on your Site in this regard:
```
.wd-action-btn > a.added:before {
    content: "\f004";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
```
Location to find Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> there you can find the CSS pasted.

Best Regards.
December 13, 2022 at 6:24 pm #428559

steve
Participant

hey Aizaz 🙂

Thanks!

But now the heart is always completely solid, actually I wanted it so that if the product is not yet on the wish list, the heart is not solid and gray as before. If it is then on the wish list, then it should be solid and red 🙂

How did you insert the filled heart now? For me \f004 did not work 🙁

Thank you so much for ur help and best regards

December 13, 2022 at 6:46 pm #428575

steve
Participant

Ah sorry my bad. I just forgot to add color to the CSS 🙂 THANK YOU!!

But my question remains, how did you manage to use \f004? For me nothing happened at all 🙂

December 14, 2022 at 10:53 am #428694

Aizaz Imtiaz Awan
Keymaster

Hello,

To be honest, we didn’t do anything special. Just opened your Site > opened the Inspect Tool of browser > highlighted the element from there > tried the mentioned Font Awesome Icon content code through CSS > and it worked eventually like you are seeing right now.

We have shared the Custom CSS with you in this regard. That was the CSS applied on your Site. By default, WoodMart Fonts are getting applied on the Icons so to override that we used the Font Family as Font Awesome.

We are glad to hear that it eventually worked for you 👍

Let us know if you need any further assistance.

Best Regards
Author

Posts