Like and Reply button - CSS

ram0ng1

to place icons on the "like" and "reply" buttons add the code below to your custom css code:

.item-like .Button-label {
	display: none;
}
.item-like .Button:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 17px;
	content: '\f164';
	margin-right: 4px;
	vertical-align: -1px;
}
.item-reply .Button--link:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 17px;
	content: '\f3e5';
	margin-right: 4px;
	vertical-align: -1px;
}
.item-reply .Button--link .Button-label {
	display: none;
}

print:

User24

ram0ng1

will be great if the colour filled after liking the post disappears when unliked. or a unlike button transform after liking.

espectrunk

Ey! Thnx for sharing! Adding to my forum!

ram0ng1

User24 I'm going to make some changes and I'll publish the result.

OneHarryPotter

It’s great. It feels even better！

littlepeace2005

ram0ng1 Thanks. I like this idea so much. Any recent updates though anyway?

pupsik

Good. I love it when there is a small, but visible changes without extensions.

Justoverclock

KakaLVPOT i think you can use some css attributes to do that
(obviously you need to change the code according to your elements/need)
like

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}

jslirola

Any ideas on how to apply with CSS the change of styles when a "Like" has been applied and when it hasn't? There is no specific class to differentiate them, the only thing that changes is the text that changes between "Like" and "Unlike"

I tried using this CSS3 selector (contains) but it didn't work:

.item-like:contains("Unlike") .Button:before {
        color: red;
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 17px;
	content: '\f165'; /* Thumbs down -- testing */
	margin-right: 4px;
	vertical-align: -1px;
}