Change the Like icon

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).

48 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.

1 Like