# Substitute symbol for Like (heart) with a custom icon

**URL:** https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882
**Category:** UX
**Created:** [10 september 2018 om 19:08 UTC](https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882 "2018-09-10T19:08:44Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [10 september 2018 om 19:08 UTC](https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882/1 "2018-09-10T19:08:44Z")

</div>

Continuing the discussion from [Symbol for like - why is it a ❤?](https://meta.discourse.org/t/symbol-for-like-why-is-it-a-heart/14973/35):

> [@Tom\_Newsom](#):
>
> No need to hack. Just add this to your custom CSS in /admin/customize/css\_html
> 
> ```plaintext
> .fa-heart:before {
> content: "\f164";
> }
> 
> ```

My community is about gems and jewels and we’d like to substitute the heart for a [font awesome gem](https://fontawesome.com/icons/gem?style=solid), while also overriding what color appears after one has clicked the “like”. What should our CSS component override look like?

Also in our logo, a diamond is on it’s side. I’d also like to rotate the font awesome gem icon about 45º so the point is towards the bottom-right… like this…

 ![jb_120](https://global.discourse-cdn.com/meta/original/3X/9/f/9f040e6696f03b511613ce82e0dd85528e53b3c1.jpeg)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [10 september 2018 om 19:09 UTC](https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882/2 "2018-09-10T19:09:48Z")

</div>

See [Change the Like Icon to 👍](https://meta.discourse.org/t/change-the-like-icon/87748)

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [10 september 2018 om 19:48 UTC](https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882/3 "2018-09-10T19:48:24Z")

</div>

For some reason, the “gem” fa icon is not rendering on the page. Any idea why? Also, if the diamond was rendering properly, what could I tweak to rotate the icon by a certain number of degrees?

Maybe @dax would have some insight?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [10 september 2018 om 20:02 UTC](https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882/4 "2018-09-10T20:02:42Z")

</div>

> [@jord8on](#):
>
> For some reason, the “gem” fa icon is not rendering on the page. Any idea why?

`fa-gem` was added on FontAwesome version 5.0 and Discourse uses version 4.7.0. The 5.0 update should happen in the next version (the next 6 months).

For now check @tshenry post about using non-Font Awesome icons: [Change the Like Icon to 👍 - #20](https://meta.discourse.org/t/change-the-like-icon/87748/20)

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [10 september 2018 om 20:44 UTC](https://meta.discourse.org/t/substitute-symbol-for-like-heart-with-a-custom-icon/96882/5 "2018-09-10T20:44:27Z")

</div>

Thanks for chiming in @Falco! gtk about version 5.0

In the meantime I’ve mimicked the approach that @tshenry put together.

Thanks all!