[BUG] Icon Heart YITH WooCommerce Wishlist

[ePiliK]

Describe the bug

I inserted the yith woocommerce list plugin

the problem is that the heart icon always appears black even if the Heart O is set which is the empty one inside with the black border around. is it possible that the icons are somehow altered by bootstrap? can I check somehow? the icon is saved with yith-wcwl-icon fa fa-heart-o. It always returns graphically to me as if it were the fa fa-heart.

is it possible that the plugin uses the icons of the old version?

checking on font awesome and putting

I would see the icon correctly, can I solve in some way to recall those icons?

[crftwrk]

Quickly googled it and yes, fa-heart-o is outdated FA 4 https://fontawesome.com/v4/icon/heart-o.

There are several ways to fix this, but the simplest way seems to use @extend in _bootscore-custom.scss. Check https://bootscore.me/documentation/theme/css-scss-compiler/#extend

.fa-heart-o {
  @extend .fa-heart;
}

Not tested because I‘m on my phone, but something like this should work.

Solved?

[crftwrk]

Converted this issue into a discussion, because this is no bug.

[ePiliK]

with the @Extended gave this error

Bootscore SCSS Compiler - Caught exception:

".fa-heart-o" failed to @extend ".fa-heart". The selector ".fa-heart" was not found.: wp-content/themes/bootscore-child/assets/scss/_bootscore-custom.scss on line 451, at column 5

basically 5 wants fa-regular instead of fa

so I solved it like this

.yith-wcwl-icon.fa-heart-o {
font-family: ‘Font Awesome 5 Free’, ‘Font Awesome 6 Free
font-weight: 400;

&::before {
  content: ‘\f004’;
}

}

.yith-wcwl-icon.fa-heart {
font-family: ‘Font Awesome 5 Free’, ‘Font Awesome 6 Free’;
font-weight: 900;

&::before {
  content: ‘\f004’;
}

}

Ty so much!

[crftwrk]

Ops, sorry. Overlooked that FA isn‘t part of the SCSS system. However, can’t provide an example right now because im not in office this week. But fixing that is very simple, just inspect the CSS of the FA6 heart icon and copy that to the FA4 selector.