Font Awesome in Message Controls

[Steve F]

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)

.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...

 

[Barbossa]

@Steve F , only fonts with tool tips, no words. How?

 

[Steve F]

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.

 

[Barbossa]

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.

 

[KaiKimera]

Width icons jumping.
Need to somehow use "Fixed Width Icons"
http://fontawesome.io/examples/#fixed-width

 

[Steve F]

Width icons jumping.
Need to somehow use "Fixed Width Icons"
http://fontawesome.io/examples/#fixed-width

Since it is using CSS only it will need to have a width added to the class. I'll get a update out for it.

 

[Bugfix]

Standard-Implementation did not work for me. I only got squares instead of the icons!
I had to change the link to https:

<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]

Standard-Implementation did not work for me. I only got squares instead of the icons!
I had to change the link to https:

<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.

 

[Bugfix]

My site isn't running https...

 

[Sadiq6210]

Thanks. Working perfect

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


I tried this but it is showing only square:

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

Any suggestion @Steve F ?

 

[Sadiq6210]

Thanks. Working perfect

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

I tried this but it is showing only square:

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

Any suggestion @Steve F ?

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




This is the new 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";
}

 

[BlackScarx]

Hello, I would like to make this but for a addon Thread Solution
How I can make?