Substitute symbol for Like (heart) with a custom icon

UX
1

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…

jb_120

2

See Change the Like icon

4 Likes
3

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?

4

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

10 Likes
5

Thanks for chiming in @Falco! gtk about version 5.0

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

Thanks all!

5 Likes