• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Font Awesome in Message Controls

Font Awesome in Message Controls

Adds Font Awesome icons to message controls

Steve F

Well-known member
#1
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...
 
#7
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?
 

Russ

Well-known member
#8
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:
#11
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.png


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: