Changing the "Like" icon


(Steve Baer) #1

Is there an easy way to change the the heart icon for “liking” a post to something else like
http://fortawesome.github.io/Font-Awesome/icon/thumbs-up-alt/
?


(Marco Ceppi) #2

In the custom CSS, in the admin panel, add the following:

.icon-heart:before {
  content: "\f087";
}

You may need to add a !important before the semicolon, depending on load ordering of CSS. However, if I recall correctly, the user generated CSS is last to be loaded. This is the simplest way to edit the icon without actually hacking the core.


(Steve Baer) #3

Thanks. Something is broken in my discourse instance for performing “Site Customizations” right now so I can’t test this. I’ll get the latest source and see if the bug is fixed and if not create a bug report.


(jcuenod) #4

I’m wanting to change the heart as well but I don’t want to use another font-awesome icon.
One could do this:

.fa-heart:before {
  content: url("/newicon.png") !important;
}

Am I correct in assuming that using an image is going to mess with things though (like the colour highlighting and sizing in different contexts)?
What alternative is there though?


(Ryan Brideau) #5

Just to update this since it is the top search result when looking to change the icon, it looks like the CSS selectors have changed. To change the icon to a green arrow, for example, you now need to use:

.fa-heart:before {
  content: "\f0aa";
}

button.like:hover {
    color: #49c15b !important;
    background: #C6FFCE !important;
}

button.has-like {
    color: #49c15b !important;
}

People are not using the :heart: button
(Robert Lauriston) #6

That worked but only the desktop version changed, mobile still has the old icon. What’s the equivalent CSS for that?


(cpradio) #7

Same, you simply have to click the mobile icon on your Customize > CSS > Style and paste the same logic.


(Robert Lauriston) #8

Oh, that’s what that’s for. Thanks.


(Метеор ИТ) #9

Maybe there is some trick how to change icon in exact button (not in whole web site)?

For example “fa-reply” just for button in topic, not in replying to some post.


#10

A short question. I changed the icon into thumbs up -sign with the following code:

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

button.like:hover {
    color: #49c15b !important;
    background: #C6FFCE !important;
}

button.has-like {
    color: #49c15b !important;
}

The result:

  • The grey heart icon was changed into a grey thumbs up icon in desktop.
  • The thumbs up icon is colorful (yellowish) in mobile.
  • Some users complain only seeing a box (UTF-8 problem, I take it).

How do I change the icon into grey again?


#11

So, after fiddling around with this, I’ve come up with the following code for you to use. Insert into CSS. Using background-image lets us use the width and height properties. Filters are used for color removal, but you can also do this manually by changing the image file (I hear filters use a lot of computing power and also don’t work everywhere…)

.fa-heart::before {
display: block;
content: "";
background-image: url("/images/emoji/apple/thumbsup.png");
background-size: cover;
width: 15px;
height: 15px;
-webkit-filter: grayscale(100);
-moz-filter: grayscale(100);
filter: grayscale(100);
}

Reader of this thread might also be interested in how to change it only in a specific topic. See:


Changing like icon and related texts in a specific topic
(Christoph Loesch) #12

i wanted the heart replaced by a thumbsup icon and styling it same like the buttons next to it.
so i came up with the following css. (im no css expert so dont know how to make it shorter than that)
maybe there is a possibility to define the image with a variable so it also changes when the emoji iconset is changed?

.fa-heart::before {
    display: block;
    content: "";
    background-image: url("/images/emoji/apple/thumbsup.png");
    background-size: cover;
    width: 15px;
    height: 15px;
    -webkit-filter: grayscale(100);
    -moz-filter: grayscale(100);
    filter: grayscale(100);
}

button.like:hover {
    color: #49c15b !important;
    background: #C6FFCE !important;
    /* background: #E9E9E9 !important; /* if you want gray background instead green on hover */
    .fa-heart::before {
        display: block;
        content: "";
        background-image: url("/images/emoji/apple/thumbsup.png");
        background-size: cover;
        width: 15px;
        height: 15px;
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }
}

button.has-like {
    color: #49c15b !important;
    .fa-heart::before {
        display: block;
        content: "";
        background-image: url("/images/emoji/apple/thumbsup.png");
        background-size: cover;
        width: 15px;
        height: 15px;
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }
}

(Christoph Loesch) #13

just upgraded to v2.0.0.beta9 +88 and noticed, a change in css is needed because the heart was displayed again instead thumbsup.
a small change, just add “-o” after heart.
so the first line has to look this way:

.fa-heart-o::before {

(Daniela) #14

There is a theme component to change :heart: with :+1: now: