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
Symbol for like - why is it a :heart:?
Changing the "Like" icon
Developer’s guide to Discourse Themes
#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.


(bowlinger) #11

What’s the CSS that I need to change in order to change the color of the icon? By default it has a gray stroke I’d like to change it to blue to look more like Facebook’s.


(Daniela) #12

Try:

.widget-button.btn-flat {
  &.toggle-like.like.no-text.btn-icon {
    color: blue;
  }
  &.like-count.highlight-action {
    &.regular-likes.btn-text, &.my-likes.btn-icon-text {
      color: blue;
    }
  }
}

nav.post-controls .like-button .like-count i.d-icon {
  color: blue;
}

(Scot) #13

I installed this theme component and it works fine. One thing though… Could someone please explain the easiest way to make the icon yellow :+1: or green maybe when selected instead of 31%20AM red? Maybe it is just me but while red makes sense for a heart, it seems strange for a thumb up icon. Thank you.


#14

@Scot

Look for the following setting

love
The like button’s color.


(Scot) #15

Thanks Dax!

I am still a bit confused in how to change the color and here is why:

It appears I have a new theme called “New Like Icon” and if I want my users to see the new like icon I need them to use this theme. To do that I need to make it the default theme. However, I am not sure I want my users to see that as the theme name so I changed the name to “Custom” and checked “Theme is enabled by default.”

So far so good. I see the new icon is being used.

Under the checkbox to enable the theme by default I see the “Color Scheme” pull down where I select the color scheme I want my “Custom” theme to use. The options are:

  • Light Scheme
  • Simple Dark

I have “Light Scheme” selected.

Your recommendation was to go to Admin / Customize / Colors to modify the love button color but when i go there I only have one color scheme listed and that is “Simple Dark.” The color scheme (“Light Scheme”) which I am using for my new like icon theme (“Custom”) is not on the list. I am not sure how I am supposed to change the love button color if I cannot access the color palette for the color scheme associated with the new like icon theme.

What am I missing?

Thank you,
Scot


#16

Hi Scot, you can create a new color scheme from there, with the +New Hutton underneath “Simple Dark”. :blush: Then you can select it for your Custom theme


(Scot) #17

OK I will do that thanks for your help :slight_smile: