Froala Editor v4.2.0 is Here LEARN MORE
Customizing Icons
Custom Button
Custom Plugin
Custom Dropdown
Custom Icon
Custom Popup
Custom Quick Insert Button
Custom Shortcut
Custom Icon
By default the editor is using the Font Awesome font to display icons. However, the default icons can be customized and you can also add your own icons.
Default icon templates.
When the editor renders an icon it is using one of the templates defined. By default the editor comes with 3 templates: FontAwesome font, text and image.
$.FroalaEditor.ICON_TEMPLATES = {
font_awesome: '<i class="fa fa-[NAME]" aria-hidden="true"></i>,',
font_awesome_5: '<i class="fas fa-[FA5NAME]" aria-hidden="true"></i>',
font_awesome_5s: '<i class="far fa-[FA5NAME]" aria-hidden="true"></i>',
text: '<span style="text-align: center;">[NAME]</span>',
image: '<img src=[SRC] alt=[ALT] />',
svg: '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">[PATH]</svg>'
}
Define a custom icon template.
Additionally to the templates defined by default, it is possible to create your very own templates. For example, below we're defining a template for the Material Design font.
// Text inside the square brackets will be replaced with their value at the render time.
$.FroalaEditor.DefineIconTemplate('material_design', '<i class="zmdi zmdi-[NAME]"></i>');
Set the default icon template.
By default the editor is using the font_awesome template but that can be changed.
$.FroalaEditor.ICON_DEFAULT_TEMPLATE = 'material_design';
Define a custom icon.
Below are some examples of customizing the way icons are displayed in the editor.
<div id="froala-icons"></div>
<script>
// Change the bold icon.
$.FroalaEditor.DefineIcon('bold', {NAME: 'star'});
// Define a font icon called magicIcon.
// Because no template was specified, the default one will be used.
$.FroalaEditor.DefineIcon('magicIcon', {NAME: 'magic'});
$.FroalaEditor.RegisterCommand('magicButton', {
title: 'Magic',
icon: 'magicIcon'
});
// Define a text icon called textIcon.
$.FroalaEditor.DefineIcon('textIcon', {NAME: 'X', template: 'text'});
$.FroalaEditor.RegisterCommand('textButton', {
title: 'Text',
icon: 'textIcon'
});
// Define a text icon called imageIcon.
$.FroalaEditor.DefineIcon('imageIcon', {SRC: 'https://raw.githubusercontent.com/google/material-design-icons/master/social/1x_web/ic_share_black_36dp.png', ALT: 'Image button', template: 'image'});
$.FroalaEditor.RegisterCommand('imageButton', {
title: 'Image',
icon: 'imageIcon'
});
// Define a font icon called smartphoneIcon that uses the Material Design font.
// You should also make sure that you include the Material Design Iconic font in your <head>:
// <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css" />
$.FroalaEditor.DefineIconTemplate('material_design', '<i class="zmdi zmdi-[NAME]"></i>');
$.FroalaEditor.DefineIcon('smartphoneIcon', {NAME: 'smartphone', template: 'material_design'});
$.FroalaEditor.RegisterCommand('smartphoneButton', {
title: 'Smartphone',
icon: 'smartphoneIcon'
});
// Initialize.
$(function () {
$('#froala-icons').froalaEditor({
toolbarButtons: ['bold', 'magicButton', 'textButton', 'imageButton', 'smartphoneButton']
})
})
</script>
Note: Once a command is defined it can be included in any of options that are using buttons: imageAltButtons, imageEditButtons, imageInsertButtons, imageSizeButtons, linkEditButtons, linkInsertButtons, tableColorsButtons, tableEditButtons, tableInsertButtons, toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, toolbarButtonsXS, videoEditButtons, videoInsertButtons or videoSizeButtons.