Change the Like icon

theme-component

(Jay Pfaffman) #21

That’s fantastic! Thanks a zillion. (Arguably, a like would be the proper response here, but just a like, even if it were an oil well wouldn’t be enough.)

Edit: I needed to add this to make it work for likes on my own posts:

button.like-count {
    .fa-heart:before {
        display: block;
        content: "";
        background-image: url($oil-liked);
        background-size: cover;
        width: 19px;
        height: 19px;
    }
}


(Taylor) #22

You’re welcome and good catch! I’ll update that theme-creator link for posterity and make sure I have more of my own posts liked on my test site :slight_smile:

I added a 4th variation of the icon for that scenario. It’s supposed to be solid grey when your own post is liked rather than the solid color. I also changed the width/height on all of the variations to 19px since it looks like that’s where you want it (it was a little difficult to see the detail before), and adjusted a little styling to accommodate the larger size.


(Jay Pfaffman) #23

Brilliant! Thanks again!


(fearlessfrog) #24

With the move to Font Awesome v5.5.0 this seems to have stopped working.

Is it just the case that we need to add ‘fab-’ to the id’s. Can’t get it to work so far…

Here’s what used to work before beta 5:

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'fighter-jet');
      api.replaceIcon('d-unliked', 'fighter-jet');
</script>

(Jeff Atwood) #25

Yes we should update this @dax


(Daniela) #27

Checked, the script itself does not need to be updated, the “non-traditional” icons (aka icons not used in Discourse) must be added with the new site setting svg icon subset. I have updated the OP now.

@fearlessfrog can you try to add the fighter-jet in the svg icon subset setting and see if it works?


(fearlessfrog) #28

Yes, it works - thanks!

Can confirm that just adding ‘fighter-jet’ to the new ‘svg icon subset’ setting and putting back the customize header script we have works as before.

Also can confirm that our users, after getting used to the macho fighter-jet like symbol, didn’t know how to feel after seeing the like-heart come back. :slight_smile:


(Bank Live) #30

I will change icon to bolt. but i cannot change.


(Daniela) #31

Why are you using the prefix fa- inside the script? It can’t works in this way. And did you add the bolt icon in the svg icon subset site setting?

image


(Bank Live) #32

Oh yes i can set it thank you