Like icon dislike


(Andras Lasso) #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):



(Steve Pieper) #2

:thumbsup:

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


(Isaiah Norton) #3

Ok, I changed it. <20 char>


#4

Hi Isaiah,

The new icon is hardly visible on my screen:

Best,
Fernando


(Andras Lasso) #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):

Active/inactive (Chrome browser):


(Isaiah Norton) #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).


(Andras Lasso) #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.


(Andras Lasso) #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!


(Isaiah Norton) #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”)

  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)


(Isaiah Norton) #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";
}

(Isaiah Norton) #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:


(Andras Lasso) #13

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