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

Unlimited colors for the icons in the editor

  1. Russ

    Russ Well-Known Member

    Russ submitted a new resource:

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

    Read more about this resource...
  2. Adam Howard

    Adam Howard Well-Known Member

    @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.
  3. Chris D

    Chris D XenForo Developer Staff Member

    Steve F, Adam Howard and MattW like this.
  4. RoldanLT

    RoldanLT Well-Known Member

    One of the great resource ever made :)
  5. Andy.N

    Andy.N 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.
  6. Russ

    Russ Well-Known Member

    Thanks @Andy.N should know better we load ours first in our themes :D
  7. RoldanLT

    RoldanLT 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"}
  8. kontrabass

    kontrabass Well-Known Member

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

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

    Tracy Perry Well-Known Member

    If you are using @Chris D's Restore Strike Through in Editor use
    html .redactor_toolbar li a.redactor_btn_deleted:before
       content: "\f0cc";
    Chris D likes this.
  10. Marcus

    Marcus 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).
    Coop1979 likes this.
  11. Chris D

    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.
    RoldanLT, Alfa1 and Marcus like this.
  12. Marcus

    Marcus Well-Known Member

    I put the custom css in template editor_ui.css and the font awesome css link in template editor_js_setup
    Chris D likes this.
  13. Russ

    Russ 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.
    Steve F likes this.
  14. Marcus

    Marcus 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?
    RoldanLT likes this.
  15. Russ

    Russ Well-Known Member

    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.
    RoldanLT likes this.
  16. Marcus

    Marcus 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: Jun 2, 2014
    Coop1979, RoldanLT and Andy.N like this.
  17. kontrabass

    kontrabass Well-Known Member

    Last edited: Jun 5, 2014
  18. Steve F

    Steve F Well-Known Member

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

    Chris D XenForo Developer Staff Member

    Steve F likes this.
  20. motowebmaster

    motowebmaster Active Member

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

Share This Page