Replace editor icons with Font Awesome [Deleted]

Russ · May 31, 2014

Russ submitted a new resource:

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

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

Code:

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

Read more about this resource...

Adam Howard · May 31, 2014

@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 · May 31, 2014

MattW said:
View attachment 74841

If you have the latest XenMediaGallery from @Chris D

Code:

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

rdn · May 31, 2014

One of the great resource ever made

Andy.N · May 31, 2014

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

It's better to load css before js files.

Russ · May 31, 2014

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

rdn · Jun 1, 2014

Compressed code:

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 · Jun 2, 2014

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

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

TPerry · Jun 2, 2014

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

Code:

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

Marcus · Jun 2, 2014

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 · Jun 2, 2014

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 · Jun 2, 2014

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

Russ · Jun 2, 2014

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 · Jun 2, 2014

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 · Jun 2, 2014

Marcus said:
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 · Jun 2, 2014

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 · Jun 5, 2014

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 · Jun 5, 2014

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

Chris D · Jun 5, 2014

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

motowebmaster · Jun 15, 2014

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

Replace editor icons with Font Awesome [Deleted]

Well-known member

Well-known member

XenForo developer

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

XenForo developer

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

XenForo developer

Well-known member

Similar threads

We value your privacy