+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Use font awesome in dark/light mode

  1. #1

    Use font awesome in dark/light mode

    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>");

  2. #2
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,223
    Hello,

    You can't use html code in css styles

  3. #3
    Quote Originally Posted by Rudi View Post
    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?

  4. #4
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,223
    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

  5. #5
    Quote Originally Posted by Rudi View Post
    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?

  6. #6
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,223
    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:
    Code:
    Only registered members can view the code.
    add or replace with:
    Code:
    Only registered members can view the code.
    then find:
    Code:
    Only registered members can view the code.
    and add:
    Code:
    Only registered members can view the code.

  7. #7
    Im solving will edit back
    Last edited by Wei Hong; September 8, 2023 at 07:54 AM.

  8. #8
    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>

  9. #9
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,223
    I need to see some example because I don't understand what is the problem

  10. #10
    Quote Originally Posted by Rudi View Post
    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

+ Reply to Thread