Replace editor icons with Font Awesome [Deleted]

[Russ]

Russ submitted a new resource:

Replace icons with Font Awesome - Unlimited colors for the icons in the editor

This is a simple edit to replace the icons in the default editor for XenForo with Font Awesome icons. Looks great on mobile, and allows you to EASILY change the colors

View attachment 74844 View attachment 74845 View attachment 74846

Step 1.)
You need to include font awesome unless your style already comes with it.

Open PAGE_CONTAINER

Find this:

<link rel="apple-touch-icon" href="{xen:helper...

Read more about this resource...

 

[Adam Howard]

@Russ I love this. Thank you.

Now if only I can figure out how to add @Chris D 's button for his Xen Media Gallery, I'll be all set.

 

[Chris D]

View attachment 74841

If you have the latest XenMediaGallery from @Chris D

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

 

[rdn]

One of the great resource ever made

 

[Andy.N]

@Russ
For the location of the CSS link, I suggest adding it after
<link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;...>

It's better to load css before js files.

 

[Russ]

Thanks @Andy.N should know better we load ours first in our themes

 

[rdn]

Compressed code:

.Responsive .redactor_toolbar li a{text-indent:0;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:400;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"}.redactor_dropdown a.saveDraft:before{content:"\f0c7"}.redactor_dropdown a.deleteDraft:before{content:"\f014"}

 

[kontrabass]

For @Chris D 's XenMediaGallery, I prefer the modern camera icon


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

 

[TPerry]

If you are using @Chris D's Restore Strike Through in Editor use

html .redactor_toolbar li a.redactor_btn_deleted:before
{
   content: "\f0cc";
}

 

[Marcus]

Suggestion:

Only include CSS on pages with the editor. That excludes guests with no permission rights to add/edit content and pages with no editor (like the forum_list page).

 

[Chris D]

I think Russ suggested PAGE_CONTAINER because typically most sites are using Font Awesome for other stuff besides just the editor.

The best place to put the CSS otherwise is at the top of the editor_js_setup template.

 

[Marcus]

I put the custom css in template editor_ui.css and the font awesome css link in template editor_js_setup

 

[Russ]

This was more meant for to be as easy as possible. To fully optimize it you could put it in the editor css, remove the background images and background positions. Ill throw up the CSS which should be removed in a FAQ if you decide to take that route. I could paste the entire contents of it but it uses style properties which could be unique to each board, which then my template would overwrite with the default.

 

[Marcus]

It works perfect now for me. Do you have plans to replace more of xenforo's icons with the great icons from font awesome?

 

[Russ]

It works perfect now for me. Do you have plans to replace more of xenforo's icons with the great icons from font awesome?

Not really sure to be honest, our framework replaces most of the icons with font awesome so we may just leave it at that, but time will tell.

 

[Marcus]

I would buy a font awesome style "Retina" that is 100% xf core style with only the icons replaced by font awesome ! It all should look like xf core, even the font awesome icons mimicking the current ones.

 

[kontrabass]

Hmm... Odd problem here with one user, and so far just one user: His font awesome redactor buttons show up as asian symbols. See here for a screenshot http://www.talkbass.com/threads/menus-are-in-korean.1081473/#post-15981792

This is probably just an outdated browser not reading the FA path correctly or something.

 

[Steve F]

That is strange - Does other font awesome icons appear fine to them on your site? Node collapse being one area..

 

[Chris D]

Might be worth getting him to try this page, to see if it's a general FA issue:
http://fontawesome.io/icons/

 

[motowebmaster]

I switched to @textCtrlText for the icon color. My users were more comfortable with the black color of the default editor icons.