• 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?

Stuart Wright

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

Russ

Well-known member
#2
:), 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";
}
 

Chris D

XenForo developer
Staff member
#8
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.
 

Russ

Well-known member
#9
With zoom...

View attachment 74847

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.
I looked for awhile and couldn't find one, settled on that ;p
 

Stuart Wright

Well-known member
#10
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:

Chris D

XenForo developer
Staff member
#12
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
 

Stuart Wright

Well-known member
#14
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";
}
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.