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 5.5 glyph you prefer).
Please, remember also that:

and that

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


People are not using the :heart: button
Changing the "Like" icon
Change icons globally using the APIs
Symbol for like - why is it a :heart:?
Developer’s guide to Discourse Themes
Substitute symbol for Like (heart) with a custom icon
#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:


(Jay Pfaffman) #18

What I’d like is an oil well. I don’t see how to do that, but there is a FA :oil_drum:. It doesn’t seem to have a hollow option, though. Is there some way to accomplish this?

It’d be cool if this theme component had means to let you choose/upload the icon.


(Daniela) #19

After a (very quick) search on Font Awesome Icons I cannot find the :oil_drum: icon (but it’s 2.00 AM here and I could already sleep without knowing it :stuck_out_tongue: ). Can you send me the page icon on FA?
I will take a look tomorrow


#20

I don’t think font-awesome will have much in the way of oil wells or drums, so I’m thinking the best way to do it would be the old CSS way. Something like this:

I made sure the colors matched where this might be going :wink:


Substitute symbol for Like (heart) with a custom icon