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

Adds Font Awesome icons to message controls

  1. Steve F

    Steve F Well-Known Member

    Steve F submitted a new resource:

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

    Read more about this resource...
     
    sadiq6210, Barbossa and Mirovinger like this.
  2. Barbossa

    Barbossa Active Member

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

    Steve F Well-Known Member

    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 likes this.
  4. Barbossa

    Barbossa Active Member

    Aww...:(

    I'll try to dig, too. Watching this thread if you ever come up with any solution, later. :)
     
  5. idFox

    idFox Well-Known Member

  6. Steve F

    Steve F Well-Known Member

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

    Bugfix Member

    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?
     
  8. Russ

    Russ Well-Known Member

    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: Sep 25, 2014
  9. Bugfix

    Bugfix Member

    My site isn't running https...
     
  10. sadiq6210

    sadiq6210 Active Member

    Thanks. Working perfect

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

    I tried this but it is showing only square:

    Code:
    LikeText:before
    {
    content: "\f087";
    }
    Any suggestion @Steve F ?
     
  11. sadiq6210

    sadiq6210 Active Member

    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: Sep 22, 2015
    EOTurtle likes this.
  12. BlackScarx

    BlackScarx New Member

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

Share This Page