Change the Like Icon to 👍

Theme component
,
1
:discourse2: Summary Change the Like Icon to :+1: allows you to change the :heart: icon to the :+1: icon – or any other font awesome 5.5 glyph you prefer.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/new-like-icon
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

:information_source: 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.

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/

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T12:34:28Z

Check documentPerform check on document:
56 Likes
42

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
43

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>
44

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
45

:star_struck:

image

Brilliant Don! Thanks for helping!

1 Like
46

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

heart
heart1555×449 46.2 KB

4 Likes
48

I’ve just put in a PR to make the repo a bit clearer (after not being able to identify the TC in my instance):

I do wonder if the repo link should also be changed from new-like-icon to something clearer. Of course, that would cause chaos, so maybe not!