Change the Like icon

theme-component

(Daniela) #1

This is a theme component that will allow you to easily change the :heart: icon with the :+1: icon (or any other font awesome glyph you prefer).

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

Before:

like%20before
like%20before2

After:

like
like%20after

Remember that you can change also:

  • color through /admin/customize/colors/
  • text through /admin/customize/site_texts/

Install it as a theme component and add the component to your main theme(s).


Change icons globally using the APIs
People are not using the :heart: button
Changing the "Like" icon
Symbol for like - why is it a :heart:?
#2

Ughhhhh, facebook haunts us on discourse as well? :face_vomiting:

(although, i see the benefit of possibly changing the like button to anything else with this example)


(Christoph) #3

There are a couple of topics on this. The biggest one is probably this one:


(Evgeny) #4

In Russia there is a social network: Vkontakte

After mark

2

  1. What to use is a matter of habit.
  2. Many people associate a finger with the distinctive feature of FB, no one wants to repeat FB.
  3. I like the standard option of Discourse-better (than in FB).

But the above proposed option is a good example of how you can change this case. :+1:


(Diego Barreiro) #5

I think there’s a bug with this theme
It has been reported here:

I also see it the :heart: instead of the :+1: in my own posts:

This change was done yesterday, so it’s not an issue of cache


(Daniela) #6

Fixed via:

It was an inconsistency not a real bug. You should update your site to take the fix

cd /var/discourse
git pull
./launcher rebuild app

(Diego Barreiro) #7

It would be nice if the “Like” icon in notifications were also replaced:


#8

To fix it for notifications and on profile pages, I found that this modification of the theme-component works:

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'thumbs-up');
      api.replaceIcon('d-unliked', 'thumbs-o-up');
      api.replaceIcon('heart', 'thumbs-up');               // profile pages
      api.replaceIcon('notification.liked', 'thumbs-up');  // notifications
</script>

Not sure if there are any implications to doing it like this, but it worked from what I could tell.


(Jeff Atwood) #9

Cool – do we need to update the theme component to account for this @dax?


(Daniela) #10

I tried to avoid doing this until the end

because the heart icon is still used in the badge page (Thank you, Gives Back, Admired, etc…) but in the end it is more a personal fear than a real problem.

Sure, I have also included other exceptions that we use such as notification.liked_many and notification.liked_2.