First you should analyse the html including classes and IDs of the element in question. This can be done easily by the inspect element feature of browsers like Firefox or Chrome.
In the case of the Like button you will find the following structure:
<aside class="Post-actions">
<ul>
<li class="item-like">
<button class="Button Button--link" type="button" title="Like">
<span class="Button-label">Like</span>
</button>
</li>
<li class="item-reply">
<button class="Button Button--link" type="button" title="Reply">
<span class="Button-label">Reply</span>
</button>
</li>
<li>
<div class="ButtonGroup Dropdown dropdown Post-controls itemCount5">
[...]
</div>
</li>
</ul>
</aside>
To insert something, you can use the CSS pseudo class ::before and put in a content directive, try for example:
.Button-label::before {
content: "x";
}
Now, every element with a Button-label class will be preceded with an x, so instead of Like there will be xLike and instead of Reply there will be xReply.
In the next step, you want to be more specific. To change only the Like buttons, you change your CSS to:
.item-like .Button-label::before {
content: "x";
}
Now, your element with a Button-label class has to be inside of an element with a item-like class to be affected by your rules.
Now let's replace your x with a FontAwesome icon. First you have to give the Button-label::before element the right font, then you need the right character instead of an x:
.item-like .Button-label::before {
font: 14px/1 FontAwesome;
content: "\f087";
}
Great, now there is a thumbs up icon in front of your Like button. So the last thing we need is to get rid of the word "Like". To do that, we give the .Button-label a fixed width and tell it to hide any overflow:
.item-like .Button-label {
display: block;
width: 1em;
overflow: hidden;
}
.item-like .Button-label::before {
font: 14px/1 FontAwesome;
content: "\f087";
}
And that's it.
