Like icon dislike

Forum and website feedback
1

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
2

:thumbsup:

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

1 Like
3

Ok, I changed it. <20 char>

6 Likes
4

Hi Isaiah,

The new icon is hardly visible on my screen:
image

Best,
Fernando

5

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

6

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

7

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

8

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

9

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
10

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

image
image720×551 85.7 KB

  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)

11

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
12

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
13

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

2 Likes