Like icon dislike

I don’t like clicking on the :heart: icon to indicate that I agree with something or I say thank you for something. Could we change the icon to :thumbsup:?

It seems that it bothers other people, too (but there is of course no general consensus):


https://meta.discourse.org/t/symbol-for-like-why-is-it-a-heart/14973/2

2 Likes

:thumbsup:

(Discourse won’t let me send just the icon so I’ve added this text)

1 Like

Ok, I changed it. <20 char>

6 Likes

Hi Isaiah,

The new icon is hardly visible on my screen:
image

Best,
Fernando

Thank you @ihnorton!

The icon is visible on my screen, it has the same visibility as other options.

On Edge browser when the icon is inactive it’s not very easy to see:

Inactive (Edge browser):

Active (Edge browser):
image

Active/inactive (Chrome browser):
image

The symbol is a unicode character, so the representation is going to be different on every platform/browser. We could try changing to a fixed image (but that might effect layout/scaling on some platforms and form factors).

@Fernando What browser are you using?

I’ve checked the appearance on 160 browsers (using http://browsershots.org/https://discourse.slicer.org/t/like-icon-dislike/159/3#) and the icon looks good on all recent ones:
https://1drv.ms/u/s!Arm_AFxB9yqHr50-uDVu33X3fWBEZw

The “share a link” icon always works, the “this reply solves my problem” works quite frequently, too. So, if possible then it may be better to use the same technique for the thumbsup icon.

That’s a thorough check :smile:. I’m using Chrome Version 57.0.2987.133 (64-bit) on Ubuntu 16.04.

It seems that the heart-shaped love/like/thumbs-up icon is back. Probably there was a discourse update.

@ihnorton you’ve managed to change the icon before. Could you fix it again? Thanks!

1 Like

Ok, done. For reference (for future-me and everyone else) here are the steps:

  1. use browser inspector to check the element (in Chrome: R-click on heart → “Inspect”)

  1. In the Admin dashboard, go to Themes and edit the custom CSS

image

  1. Change the name of the selected element to match the current name:

image

(previously it was only fa-heart; now it is fa-heart-o)

Oops, that only changed the un-liked icon. I guess they are using separate names now, so now it looks like this to get thumbs-up for liked icon as well:

.fa-heart:before {
  content: "\01F44D";
}

.fa-heart-o:before {
  content: "\01F44D";
}
1 Like

Discourse upstream made some changes again, and the previous icon fix stopped working. So we are now using the following technique – still gives a thumbs-up instead of heart, but the appearance changed a little bit:

1 Like

Thanks a lot for fixing this so quickly! I like the new like.

2 Likes