Change favorites icon via CSS

General Favorites
1

Hello HivePress team,

I’m using MeetingHive and I would like to change the favorites button icon.

Could you please help me with the correct CSS code to change this icon to a different Font Awesome icon (for example, a star)?

I want to change both states:

  • Inactive state (add to favorites)

  • Active state (remove from favorites)

Thank you for your help!

Best regards"

2

Thanks for your message — our team will reply shortly.

In the meantime, you can also get instant help from our AI Assistant, familiar with all the docs and solutions we’ve shared over the years.

3

Hi,

Please try this PHP snippet: How to add custom code snippets - HivePress Help Center

add_filter(
    'hivepress/v1/blocks/favorite_toggle',
    function( $blocks ) {
        if ( isset( $blocks['icon'] ) ) {
            $blocks['icon'] = 'fas fa-star';
        }
        return $blocks;
    }
);

Hope this helps.

4

Hi,

Thanks for the code snippet!

Unfortunately, it’s still not working. I’ve tried:

  • Adding it via Code Snippets plugin (PHP)

  • Adding it in Additional CSS

  • Clearing cache

The favorite icon (+)(x) hasn’t changed. Does this customization require a child theme to work properly? Or is there something else I might be missing?

Thanks for your help!

Best regards

5

Thanks for the update.

Please take a look at the screencast that displays that the snippet should work: Favorites Icon | Loom.

Ensure there’s no caching when testing the site after adding the snippet. You can test in incognito mode or clear your browser cache, and also check your caching plugin settings to ensure there’s no caching enabled for logged-in users. Also, please make sure that the snippet is activated.

Hope this helps.

6

Hello,

Thank you for the screencast and support provided so far.

I have followed all the instructions you provided:

  1. Code Snippet Implementation : I’ve added the snippet to Code Snippets as shown in the first attached screenshot. The snippet is activated and properly configured.

  2. Caching Tests :

    • My website does not have any caching plugin installed

    • I tested in incognito mode as suggested

    • I cleared my browser cache multiple times

    • Despite these tests, the favorite icon still displays the “X” symbol instead of the heart icon (see second screenshot)

  3. Theme Information : I’m using the MeetingHive theme.

The visual result remains unchanged after implementing the snippet and performing all the recommended tests. Could you please review this issue further or suggest additional troubleshooting steps?

I really appreciate all the assistance you’ve provided so far.

Best regards

2
21920×996 221 KB

7

In the second screenshot, I’m showing the element I want to change

3
31920×1039 199 KB

11

Sorry for the delay. It seems that the theme overrides icons via CSS instead of PHP – please try this CSS code snippet (you can add it in Appearance/Customize/Additional CSS):

.hp-listing--view-block .hp-listing__actions--primary .hp-listing__action--favorite i::before, .hp-listing--view-page .hp-listing__actions--secondary .hp-listing__action--favorite i::before {
    content: '\f067';
}

.hp-listing--view-block .hp-listing__actions--primary .hp-listing__action--favorite[data-state=active] i::before, .hp-listing--view-page .hp-listing__actions--secondary .hp-listing__action--favorite[data-state=active] i::before {
    content: '\f00d';
}

You can choose the icons here Line Awesome — Free Beautiful Icon Font and change “f067” and “f00d” icon IDs accordingly.

Hope this helps

12

Thank you for your response and for providing the CSS code.

Unfortunately, the code still doesn’t work. I tested it in incognito mode and also cleared the cache, but the favorite icon remains unchanged.

I tried inserting only the latest CSS code you provided, and I also tried activating the first PHP code together with the CSS code at the same time, but neither approach worked.

Could you please confirm if I need to create a child theme of MeetingHive for this CSS code to work properly? Also, could you please verify if the CSS selectors are correct for the MeetingHive theme? Perhaps the classes or structure are different in this theme.

I appreciate your help with this.

Best regards

8
81739×953 196 KB

13

Hi,

The provided snippet works, but you need to replace the code icons with the ones from the shared library. Please take a look at the screencast, I used the codes from the library: Changins favorite icon in MeetingHive | Loom.

Apologies for taking so long to find the solution. Hope this one will address your request.

14

Hi,

Thank you so much for your time and patience! This solution worked perfectly. The favorite icon is now changing as expected.

I really appreciate your help in resolving this issue.

Best regards

15

Glad to help!

If you have a minute, please rate HivePress on the WordPress repository or Trustpilot. Your feedback means a lot to us and makes a real difference in helping us grow.

Wishing you a relaxing weekend. :herb: