Substitute symbol for Like (heart) with a custom icon

Continuing the discussion from Symbol for like - why is it a :heart:?:

My community is about gems and jewels and we’d like to substitute the heart for a font awesome gem, 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…


See Change the Like icon


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?

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


Thanks for chiming in @Falco! gtk about version 5.0

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

Thanks all!