Use font awesome in dark/light mode

[Wei Hong]

Dear Flynax Dev,

Is there anyway I can use the fontawesome code, for example:

<i class="fa-solid fa-heart"></i>

In dark and light css file:

--listing-print-icon: url("../img/print.svg");
--listing-favorite-icon: url("../img/like.svg");
--listing-favorite-icon-active: url("../img/like-active.svg");
--listing-compare-icon: url("../img/compare.svg");
--listing-compare-icon-active: url("../img/compare-active.svg");

Something like this:

--listing-favorite-icon-active: url("<i class="fa-solid fa-heart"></i>");

[Rudi]

Hello,

You can't use html code in css styles

[Wei Hong]

Hello,

You can't use html code in css styles

That's sad Rudi, can we add the html code for favorite, compare, and print icon on somewhere else? May be in content.tpl of the template file?

[Rudi]

There are few files where you need to modify html for icons:

templates/.../tpl/blocks/listing.tpl > class="favorite add"
templates/.../tpl/blocks/featured_item.tpl > class="favorite add"
templates/.../controllers/listing_details/navigation.tpl > class="print" && class="favorite add"
plugins/compare/details_icon.tpl && icon.tpl

[Wei Hong]

There are few files where you need to modify html for icons:

templates/.../tpl/blocks/listing.tpl > class="favorite add"
templates/.../tpl/blocks/featured_item.tpl > class="favorite add"
templates/.../controllers/listing_details/navigation.tpl > class="print" && class="favorite add"
plugins/compare/details_icon.tpl && icon.tpl

Thank you Rudi,

I found the code for favorite icon inn listing.tpl and navigation.tpl

<span id="fav_{$listing.ID}" class="favorite add" title="{$lang.add_to_favorites}">
<svg viewBox="0 0 14 12" class="icon">
<use xlink:href="#favorite-icon"></use>
</svg>
</span>

{if !$noFavIcon}
<span id="fav_{$listing_data.ID}" class="favorite add" title="{$lang.add_to_favorites}"><span class="icon"></span></span>
{/if}

I could change like this

{if !$noFavIcon}
<span id="fav_{$listing_data.ID}" class="favorite add" title="{$lang.add_to_favorites}"><i class="fa-solid fa-heart"></i></span>
{/if}

The icon shows up OK as --listing-favorite-icon, but what about --listing-favorite-icon-active. And is there any way I can add for dark mode and light mode?

[Rudi]

Is there a class in the Fontawesome library for a filled or active heart?

If yes, you need to go to templates/js/lib.js > var flFavoritesHandler = function()

after this line:

Only registered members can view the code.

add or replace with:

Only registered members can view the code.

then find:

Only registered members can view the code.

and add:

Only registered members can view the code.

[Wei Hong]

Im solving will edit back

[Wei Hong]

Hi Rudi,

So the code in my navigation.tpl is:

{if !$noFavIcon}
<span id="fav_{$listing_data.ID}" class="favorite add" title="{$lang.add_to_favorites}"><span class="icon fa-regular fa-heart"></span></span>
{/if}

In lib.js I have:

$(this).removeClass('add').addClass('remove');
$(this).find('i').removeClass('fa-solid').addClass('fa-regular');

I tried remove

$(this).removeClass('add').addClass('remove');

And replace with:

$(this).removeClass('a-regular').addClass('a-solid');

And not using this code:

$(this).find('i').removeClass('fa-solid').addClass('fa-regular');

It works. But it won't sync with the style.css for light and dark-mode

.listing-header span.favorite > span {
background-image: var(--listing-favorite-icon);
background-repeat: no-repeat;

How do I make this code

$(this).removeClass('add').addClass('remove');
$(this).find('i').removeClass('fa-solid').addClass('fa-regular');

To work as to remove "fa-solid" and replace with "fa-regular" in the code below:

<span id="fav_{$listing_data.ID}" class="favorite add" title="{$lang.add_to_favorites}"><span class="icon fa-regular fa-heart"></span></span>

[Rudi]

I need to see some example because I don't understand what is the problem

[Wei Hong]

I need to see some example because I don't understand what is the problem

Hi Rudi, I'm sorry may be my response was too complicated. I will try to make it simpler.
I have the following code below in my navigation.tpl file for the favorite icon, I added the class fa-heart fa-regular:

{if !$noFavIcon}
<span id="fav_{$listing_data.ID}" class="favorite add" title="{$lang.add_to_favorites}"><span class="icon fa-heart fa-regular"></span></span>
{/if}

How can I make it so when clicking on the icon, the class fa-heart fa-regular change to fa-heart fa-solid, click again change back to fa-heart fa-regular
I figure that I need to look into the lib.js that in your instruction above, I added the code in bold below:

$(this).removeClass('add').addClass('remove');
$(this).find('i').removeClass('fa-regular').addClass('fa-solid');
$(this).attr('title', lang['remove_from_favorites']).find('span.link').text(lang['remove_from_favorites']);

But it does not work. Did I make it wrong? I want to keep the line $(this).removeClass('add').addClass('remove'); so it will work with the light.css and dark.css