Replace editor icons with Font Awesome [Deleted]


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


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

Read more about this resource...
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.
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"}
For @Chris D 's XenMediaGallery, I prefer the modern camera icon :)

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

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).
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.
I put the custom css in template editor_ui.css and the font awesome css link in template editor_js_setup
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.
It works perfect now for me. Do you have plans to replace more of xenforo's icons with the great icons from font awesome?
  • Like
Reactions: rdn
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.
  • Like
Reactions: rdn
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.
Last edited:
That is strange - Does other font awesome icons appear fine to them on your site? Node collapse being one area..
Top Bottom