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:


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


add or replace with:


$(this).find('i').removeClass('fa-heart').addClass('FILLED-HEART-CLASS');


then find:


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


and add:


$(this).find('i').removeClass('FILLED-HEART-CLASS').addClass('fa-heart');

[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

[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:

4866

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