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

[Stuart Wright]

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]

, 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:


And the popup...


using:

.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";
}

 

[rdn]

Nah! This is awesome @Russ
Thanks !

 

[rdn]

Pretty, Sexy, Neat

 

[Russ]

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 .

 

[MattW]

If you have the latest XenMediaGallery from @Chris D

html .redactor_toolbar li a.redactor_btn_custom_gallery:before
{
   content: "\f083";
}

 

[Chris D]

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.

 

[Chris D]

With zoom...



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]

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]

Yes, awesome, guys. Thanks *so* much, Russ.
I also added

    .redactor_dropdown a.saveDraft:before
    {
       content: "\f0f6";
    }
    .redactor_dropdown a.deleteDraft:before
    {
       content: "\f016";
    }

 

[Russ]

I made a resource for it here as well:

http://xenforo.com/community/resources/replace-icons-with-font-awesome.3260/

 

[Chris D]

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

.redactor_dropdown a.saveDraft:before
{
    content: "\f0c7";
}
.redactor_dropdown a.deleteDraft:before
{
    content: "\f014";
}

 

[Russ]

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

.redactor_dropdown a.saveDraft:before
{
    content: "\f0c7";
}
.redactor_dropdown a.deleteDraft:before
{
    content: "\f014";
}

View attachment 74852

I went ahead and added it to the resource

 

[Stuart Wright]

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

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

 

[rdn]

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.

This?

background-image: url('@imagePath/xenforo/editor/icons.png?redactor');

 

[Chris D]

Yes, that @RoldanLT.

That's probably an important step, actually, @Russ.

 

[Stuart Wright]

And also any other references to the background position, which are all irrelevant.

 

[Shipside]

This worked for me perfectly.