# Like icon dislike

**URL:** <https://discourse.slicer.org/t/like-icon-dislike/159>\
**Category:** Forum and website feedback\
**Created:** [April 21, 2017, 3:07am UTC](https://discourse.slicer.org/t/like-icon-dislike/159 "2017-04-21T03:07:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [April 21, 2017, 3:07am UTC](https://discourse.slicer.org/t/like-icon-dislike/159/1 "2017-04-21T03:07:16Z")

</div>

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

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

> **[Changing the "Like" icon](https://meta.discourse.org/t/changing-the-like-icon/7460/8)**
>
> Oh, that’s what that’s for. Thanks.

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

---

<div class="post-metadata">

**Author:** ![pieper](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/pieper/32/8_2.png) [@pieper](https://discourse.slicer.org/u/pieper)\
**Post date:** [April 21, 2017, 1:20pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/2 "2017-04-21T13:20:04Z")

</div>

👍

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

---

<div class="post-metadata">

**Author:** ![ihnorton](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/ihnorton/32/9_2.png) [@ihnorton](https://discourse.slicer.org/u/ihnorton)\
**Post date:** [April 21, 2017, 3:29pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/3 "2017-04-21T15:29:19Z")

</div>

Ok, I changed it. \<20 char\>

---

<div class="post-metadata">

**Author:** ![Fernando](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/fernando/32/5640_2.png) [@Fernando](https://discourse.slicer.org/u/Fernando)\
**Post date:** [April 21, 2017, 3:43pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/4 "2017-04-21T15:43:11Z")

</div>

Hi Isaiah,

The new icon is hardly visible on my screen:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/7/a/7a3f28b4b517ae0b18dade75518a271e76a14589.png)

Best,  
Fernando

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [April 21, 2017, 3:48pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/5 "2017-04-21T15:48:32Z")

</div>

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):  
 ![](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/1X/6fd0b52a2fdffd9349c605dd4c9fcc8904bb0354.png)

Active (Edge browser):  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/f/4/f41d4d740457a31cf743fbfc70441524ff397f98.png)

Active/inactive (Chrome browser):  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/0/a/0a1ae5554fabc6cbdb67487e77aa31e7a1f30a6e.png)

---

<div class="post-metadata">

**Author:** ![ihnorton](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/ihnorton/32/9_2.png) [@ihnorton](https://discourse.slicer.org/u/ihnorton)\
**Post date:** [April 21, 2017, 3:59pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/6 "2017-04-21T15:59:12Z")

</div>

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](https://meta.discourse.org/t/changing-the-like-icon/7460/4) (but that might effect layout/scaling on some platforms and form factors).

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [April 21, 2017, 4:42pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/7 "2017-04-21T16:42:18Z")

</div>

@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#](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](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.

---

<div class="post-metadata">

**Author:** ![Fernando](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/fernando/32/5640_2.png) [@Fernando](https://discourse.slicer.org/u/Fernando)\
**Post date:** [April 21, 2017, 4:57pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/8 "2017-04-21T16:57:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [May 11, 2018, 3:17pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/9 "2018-05-11T15:17:49Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![ihnorton](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/ihnorton/32/9_2.png) [@ihnorton](https://discourse.slicer.org/u/ihnorton)\
**Post date:** [May 11, 2018, 8:22pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/10 "2018-05-11T20:22:55Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/2/3/2338612a93dd0153fad30ae3e029bd3f1f5a5932.png)

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

![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/b/3/b3fe2bb8bc4ed3ea712ec569a67bd30c440bb71c.png)

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

![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/e/b/eb56d2f2c2818ee1b7944e1635fd109bc2f7125e.png)

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

---

<div class="post-metadata">

**Author:** ![ihnorton](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/ihnorton/32/9_2.png) [@ihnorton](https://discourse.slicer.org/u/ihnorton)\
**Post date:** [May 11, 2018, 8:25pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/11 "2018-05-11T20:25:04Z")

</div>

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:

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

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

```

---

<div class="post-metadata">

**Author:** ![ihnorton](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/ihnorton/32/9_2.png) [@ihnorton](https://discourse.slicer.org/u/ihnorton)\
**Post date:** [November 28, 2018, 2:14pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/12 "2018-11-28T14:14:01Z")

</div>

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:

> **[Change the Like Icon to 👍](https://meta.discourse.org/t/change-the-like-icon-to/87748)**
>
> :discourse2: Summary Change the Like Icon to 👍 allows you to change the ❤ icon to the 👍 icon – or any other font awesome 5.5 glyph you prefer. 🛠 Repository Link https://github.com/discourse/new-like-icon 📖 New to Discourse Themes? Beginner’s...

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [November 28, 2018, 2:17pm UTC](https://discourse.slicer.org/t/like-icon-dislike/159/13 "2018-11-28T14:17:56Z")

</div>

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