Change the Like icon to πŸ‘

This theme component allows you to change the :heart: icon to the :+1: icon – or any other font awesome 5.5 glyph you prefer.

:bulb: Since we switched to Font Awesome 5, we built an internal API that delivers a subset of all FA icons to clients – only those icons actively used by Discourse. Site owners can use the svg icon subset site setting to register additional icons for their Discourse instance.

Repository

https://github.com/discourse/new-like-icon

Before

like%20before
like%20before2

After

like
like%20after

If desired,

  • you can change the color of the like icon via /admin/customize/colors/ (look for the love color setting)
  • you can change the text from β€œlike” to a different term via /admin/customize/site_texts/

This is a theme component, so add the component to your main theme(s).

50 Likes

Hi,
Sorry to dredge up this topic again but I am totally confused. I just came across this as I saw another discourse forum using a thumbs up so I did some googling.
What I’d like to do is instead of using the Thumbs up, is to use the Pig icon from here - Font Awesome with the outline version being the Unliked icon. Is that possible? Since it’s a Pro icon, would I have to download it or make my own and add it as a custom icon or emoji and then apply it to the Like Icon component.? Not sure how to do that either.
I have the Change Like Icon component installed and tested it out on an unused theme and it does work as intended. The problem is I see no area in settings under that component to mess with CSS, so there’s no place to add the scripting from earlier on in this thread.
Any help would be appreciated, thanks.

2 Likes

Like @Phlipups I’m trying to change the icon simply to the solid beer icon, but I get a blank.


<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'beer');
      api.replaceIcon('d-unliked', 'fa-beer');
      api.replaceIcon('notification.liked', 'fa-beer');
      api.replaceIcon('notification.liked_2', 'fa-beer');
      api.replaceIcon('notification.liked_many', 'fa-beer');
      api.replaceIcon('notification.liked_consolidated', 'fa-beer');      
      api.replaceIcon('heart', 'beer');
</script>

Hi Tris,

Try add beer to admin/site_settings/category/all_results?filter=svg%20icon%20subset
svg icon subset site setting.
And I think use only beer instead fa-beer is enough. Beer icon has not an only bordered version in free so just the color will change after click.

3 Likes

:star_struck:

image

Brilliant Don! Thanks for helping!

1 Like

Hi guys, I installed this component and, while it works great and it successfully replace the heart icon on the post list, the email notifications that my users are receiving are still showing the old heart icon.
Am I missing something? do I need to modify something on the email template as well?
Thank you for developing this nice component