• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Replace editor icons with Font Awesome

Replace editor icons with Font Awesome


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


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


Well-known member
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"}


Well-known member

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

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


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


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


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