Font Awesome in Message Controls

Font Awesome in Message Controls

Steve F

Well-known member
Steve F submitted a new resource:

Font Awesome in Message Controls - Adds Font Awesome icons to message controls

Simple CSS replacement that adds Font Awesome icons next to the text controls for messages.

Add to EXTRA.css (may need some adjusting)
Code:
.item.control.like:before
{
    content: "\f087";
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 3px;
 
}

.item.control.reply:before
{
    content: "\f122";
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;...

Read more about this resource...
 
That would require a template edit or template mod to achieve. I haven't got time to get into the specifics of it at the moment though.
 
That would require a template edit or template mod to achieve. I haven't got time to get into the specifics of it at the moment though.
Aww...:(

I'll try to dig, too. Watching this thread if you ever come up with any solution, later. :)
 
Standard-Implementation did not work for me. I only got squares instead of the icons!
I had to change the link to https:
HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Any ideas why this is necessary?
 
Standard-Implementation did not work for me. I only got squares instead of the icons!
I had to change the link to https:
HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Any ideas why this is necessary?

If your site is running https you'll need to adjust the font awesome to do the same, removing the https: would work as well.
 
Last edited:
Thanks. Working perfect

I want to add the (like) icon here also:
upload_2015-9-22_11-29-38.webp

I tried this but it is showing only square:

Code:
LikeText:before
{
content: "\f087";
}

Any suggestion @Steve F ?
 
Thanks. Working perfect

I want to add the (like) icon here also:
View attachment 117473

I tried this but it is showing only square:

Code:
LikeText:before
{
content: "\f087";
}

Any suggestion @Steve F ?

OK I solved it
I added (unlike) + (like) icons as shown :

upload_2015-9-22_14-6-29.webp


This is the new code:

Code:
.LikeText, .item.control.like:before, .item.control.unlike:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
display: inline-block;
font-family: FontAwesome;
font-size: 13px !important;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 3px;
}

.LikeText:before
{
content: "\f087";
}

.item.control.unlike:before
{
content: "\f088";
}

.item.control.like:before
{
content: "\f087";
}
.item.control.reply:before
{
content: "\f122";
}
.item.control.bookmarks:before
{
content: "\f02e";
}
.item.control.edit:before
{
content: "\f040";
}
.item.control.report:before
{
content: "\f071";
}
.item.control.warn:before
{
content: "\f12a";
}
.item.control.ip:before
{
content: "\f002";
}
.item.control.deleteSpam:before
{
content: "\f024";
}
.item.control.history:before
{
content: "\f1da";
}

.item.control.delete:before
{
content: "\f00d";
}
 
Last edited:
Top Bottom