1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 How to use font-awesome for Redactor icons?

Discussion in 'Styling and Customization Questions' started by Stuart Wright, May 31, 2014.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    Would it be easy to replace the standard redactor icons with font awesome icons instead?
    We use font awesome anyway. Makes sense to ditch the extra png and get high res buttons in at the same time.
     
    RoldanLT likes this.
  2. Russ

    Russ Well-Known Member

    :), I achieved it this way, was going to post it as a resource when I made sure it was working fine, might be some bugs here.

    Looks like:
    Screenshot_4.png

    And the popup...
    Screenshot_5.png

    using:

    Code:
    .Responsive .redactor_toolbar li a
    {
       text-indent: 0px;
       text-align: center;
       background-image: none !important;
    }
    .Responsive .redactor_toolbar li a:before, html .redactor_dropdown a:before
    {
       display: inline-block;
       font-family: FontAwesome;
       font-style: normal;
       font-weight: normal;
       font-size: 14px;
       color: @primaryDarker;
       line-height: 24px;
    }
    html .redactor_toolbar li a:hover
    {
       background-image: none !important;
    }
    html .redactor_dropdown a
    {
       padding-left: 0 !important;
       background-image: none !important;
    }
    html .redactor_dropdown a:before
    {
       margin-right: 10px;
    }
    html.Responsive .redactor_toolbar li a.redactor_btn_bold:before
    {
       content: "\f032";
    }
    html .redactor_toolbar li a.redactor_btn_italic:before
    {
       content: "\f033";
    }
    html .redactor_toolbar li a.redactor_btn_underline:before
    {
       content: "\f0cd";
    }
    html .redactor_toolbar li a.redactor_btn_fontcolor:before
    {
       content: "\f042";
    }
    html .redactor_toolbar li a.redactor_btn_fontsize:before
    {
       content: "\f034";
    }
    html .redactor_toolbar li a.redactor_btn_fontfamily:before
    {
       content: "\f031";
    }
    html .redactor_toolbar li a.redactor_btn_createlink:before
    {
       content: "\f0c1";
    }
    html .redactor_toolbar li a.redactor_btn_unlink:before
    {
       content: "\f127";
    }
    html .redactor_toolbar li a.redactor_btn_alignment:before
    {
       content: "\f036";
    }
    html .redactor_toolbar li a.redactor_btn_unorderedlist:before
    {
       content: "\f0ca";
    }
    html .redactor_toolbar li a.redactor_btn_orderedlist:before
    {
       content: "\f0cb";
    }
    html .redactor_toolbar li a.redactor_btn_outdent:before
    {
       content: "\f03b";
    }
    html .redactor_toolbar li a.redactor_btn_indent:before
    {
       content: "\f03c";
    }
    html .redactor_toolbar li a.redactor_btn_smilies:before
    {
       content: "\f118";
    }
    html .redactor_toolbar li a.redactor_btn_image:before
    {
       content: "\f03e";
    }
    html .redactor_toolbar li a.redactor_btn_media:before
    {
       content: "\f008";
    }
    html .redactor_toolbar li a.redactor_btn_insert:before
    {
       content: "\f067";
    }
    html .redactor_toolbar li a.redactor_btn_draft:before
    {
       content: "\f0c7";
    }
    html .redactor_toolbar li a.redactor_btn_undo:before
    {
       content: "\f0e2";
    }
    html .redactor_toolbar li a.redactor_btn_redo:before
    {
       content: "\f01e";
    }
    html .redactor_toolbar li a.redactor_btn_removeformat:before
    {
       content: "\f12d";
    }
    html .redactor_toolbar li a.redactor_btn_switchmode:before
    {
       content: "\f0f6";
    }
    html .redactor_dropdown a.alignLeft:before
    {
       content: "\f036";
    }
    html .redactor_dropdown a.alignCenter:before
    {
       content: "\f037";
    }
    html .redactor_dropdown a.alignRight:before
    {
       content: "\f038";
    }
    .redactor_dropdown a.quote:before
    {
       content: "\f10d";
    }
    .redactor_dropdown a.spoiler:before
    {
       content: "\f024";
    }
    .redactor_dropdown a.code:before
    {
       content: "\f121";
    }
    .redactor_dropdown a.strikethrough:before
    {
       content: "\f0cc";
    }
    
    
     
  3. RoldanLT

    RoldanLT Well-Known Member

    Nah! This is awesome @Russ (y)
    Thanks !
     
  4. RoldanLT

    RoldanLT Well-Known Member

    Pretty, Sexy, Neat (y)
    upload_2014-5-31_22-48-28.png
     
    Steve F and Russ like this.
  5. Russ

    Russ Well-Known Member

    I did the css up a few days ago when I got sick and tired of editing colors for the editor icons, this makes it so you can set the color to anything you want now :).
     
    Chris D, MattW, HWS and 1 other person like this.
  6. MattW

    MattW Well-Known Member

    upload_2014-5-31_16-5-15.png

    If you have the latest XenMediaGallery from @Chris D
    Code:
    html .redactor_toolbar li a.redactor_btn_custom_gallery:before
    {
       content: "\f083";
    }
     
    Steve F, Adam Howard, Chris D and 2 others like this.
  7. Chris D

    Chris D XenForo Developer Staff Member

    Love this. Great work @Russ. And thanks @MattW.

    Obviously I include FA in XMG anyway so chances are I may ditch that png image in favour of that icon.
     
  8. Chris D

    Chris D XenForo Developer Staff Member

    With zoom...

    upload_2014-5-31_16-59-17.png

    I was convinced that there ought to be a better colour selection icon but there isn't. Everything else is a perfect fit though.

    I would like to see FA included in a future XF version, even if it isn't used by XF. So many people use it now in styles and customisations and add-ons.
     
    RoldanLT and MattW like this.
  9. Russ

    Russ Well-Known Member

    I looked for awhile and couldn't find one, settled on that ;p
     
    MattW likes this.
  10. Stuart Wright

    Stuart Wright Well-Known Member

    Yes, awesome, guys. Thanks *so* much, Russ.
    I also added
    Code:
        .redactor_dropdown a.saveDraft:before
        {
           content: "\f0f6";
        }
        .redactor_dropdown a.deleteDraft:before
        {
           content: "\f016";
        }
    
     
    Last edited: May 31, 2014
    MattW likes this.
  11. Russ

    Russ Well-Known Member

  12. Chris D

    Chris D XenForo Developer Staff Member

    Personally, for the draft drop down I think this looks better:

    Code:
    .redactor_dropdown a.saveDraft:before
    {
        content: "\f0c7";
    }
    .redactor_dropdown a.deleteDraft:before
    {
        content: "\f014";
    }
    upload_2014-5-31_17-17-17.png
     
    Steve F and Russ like this.
  13. Russ

    Russ Well-Known Member

    I went ahead and added it to the resource
     
    Chris D likes this.
  14. Stuart Wright

    Stuart Wright Well-Known Member

    I agree, Chris.
    Implemented on AVForums and agree about the official adoption of Font Awesome.
    I also edited the editor_ui template to comment out references to the background so the png doesn't get loaded.
     
    Adam Howard and Chris D like this.
  15. RoldanLT

    RoldanLT Well-Known Member

    This?
     
    Adam Howard likes this.
  16. Chris D

    Chris D XenForo Developer Staff Member

    Yes, that @RoldanLT.

    That's probably an important step, actually, @Russ.
     
    Adam Howard and RoldanLT like this.
  17. Stuart Wright

    Stuart Wright Well-Known Member

    And also any other references to the background position, which are all irrelevant.
     
    RoldanLT likes this.
  18. This worked for me perfectly.
     

Share This Page