Use font awesome in dark/light mode

[Wei Hong]

I Rudi,

Would you please take a look at this. Is it still unclear?

Thank you

[Tim Copper]

I'm interested in changing the nav icon, too. So I can follow this instruction of Rudi for it?

[Rudi]

Hello Wei,

You need to replace <span class="icon fa-regular fa-heart"> with <i class="fa-heart fa-regular"></i> in tpl file and it should work

Again, to check this I need to see it live

[Wei Hong]

I'm interested in changing the nav icon, too. So I can follow this instruction of Rudi for it?

Yes, I'm still trying to figure it out.

Hello Wei,

You need to replace <span class="icon fa-regular fa-heart"> with <i class="fa-heart fa-regular"></i> in tpl file and it should work

Again, to check this I need to see it live

Hi Rudi,

I wish I could show it to you on live website, unfortunately I'm working on localhost machine. I have change code in navigation.tpl to:

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

And in lib.js I add 3 lines in 3 different places 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']);

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

$(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']);

When I click on the icon:

Screen Shot 2023-09-14 at 7.44.45 PM.png

Only class="favorite add" change to class="favorite remove" and vise versa. The class below (class="fa-heart fa-regular") remain unchanged no matter what.

[Rudi]

You need to do exactly the same as mentioned in my previous post

Anyway, I need to see the live site to tell you anything

[Wei Hong]

You need to do exactly the same as mentioned in my previous post

Anyway, I need to see the live site to tell you anything

Hi Rudi, I'm 100% sure I did exactly as you mentioned, it's not that complicated adding a line or two in the file, as I have been explaining with details above, also tried many variant for the past few days. I'm very sad that it's not working out. It seems that this problem is too complicated to solve then. Thank you for your time though.

[Rudi]

Ok, but I didn't see that you replaced <span class="icon fa-regular fa-heart"> with <i class="fa-heart fa-regular"></i>

[Wei Hong]

You are totally right how careless of me, I did not see the <i> and <span>, it works now. Thank you so much Rudi