How to change Button Layout and Icon in TinyMCE Editor

How to change Button Layout and Icon in TinyMCE Editor

by John Provasnik -
Number of replies: 0
Picture of Particularly helpful Moodlers Picture of Testers
To change the order of Atto buttons, navigate to Site administration - Plugins - Text editors - Atto HTML editor - Atto toolbar settings
To change the icon, you can either use CSS or Modify the plugin in file.
With CSS, you could hide the existing icon and replace it with a font awesome icon. Example with a different button:
.editor_atto_toolbar .atto_morefontcolors_button .editor_atto_menu_icon i {display: none;}
.editor_atto_toolbar .atto_morefontcolors_button .editor_atto_menu_icon:before {font-family: FontAwesome; font-weight: 300; content: "\f007";}
Average of ratings: Useful (1)