TinyMCE Font Awesome plugin

Font Awesome plugin for TinyMCE 5

Installation guide, technical informations

Prerequirements

Supported browsers

  • All major browsers supported by TinyMCE and Font Awesome
    • Chrome
    • Firefox
    • Safari
    • Edge
    • IE 11
    • All major mobile browsers
    • etc.

Installation

  • Copy uncompressed folder faicons into your /tinymce/js/tinymce/plugins/ folder (depending on your TinyMCE path)
  • Installation contains faicons.json (list of icons) for Font Awesome 5.14.0, for other versions download the appropriate file, uncompress and copy it to /tinymce/js/tinymce/plugins/faicons/json/ folder
    5.1.1, 5.2.0, 5.3.1, 5.4.1, 5.4.2, 5.5.0, 5.6.0, 5.6.1, 5.6.3, 5.7.0, 5.7.1, 5.7.2, 5.8.0, 5.8.1, 5.8.2, 5.9.0, 5.10.0, 5.10.1, 5.10.2, 5.11.0, 5.11.1, 5.11.2, 5.12.0, 5.12.1, 5.13.0, 5.13.1, 5.14.0, 5.15.1
  • Edit your tinymce.init()
    • Add faicons into plugins
    • Add faicons into toolbar
    • Add /yourpath/fontawesome-free/css/all.min.css (depending on your font awesome css file path) into content_css
    • (optional) Add faicons into menu - TinyMCE documentation
    • (optional) Add faicons_default_color definition - default is '858796'
    • (optional) Add faicons_default_size definition - default is 'fa-3x'
      acceptable values are fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, fa-10x
    Example tinymce.init() - exactly the same is used on demo page:
    tinymce.init({
      content_css : "/vendor/fontawesome-free/css/all.min.css",
      height : 500,
      //language : "cs",
      selector : "#tiny",
      toolbar: "faicons",
      plugins: 'faicons code',
      faicons_default_color: 'c74848',
      faicons_default_size: 'fa-7x',
      menubar: 'insert view',
      menu: {
        insert: { title: 'Insert', items: 'faicons' },
        view: { title: 'View', items: 'code' }
      }, 
    });         

Languages

  • Plugin is in default english language, the only one other is Czech - 'cs' language
  • If you need some other, it's easy to add new language:
    • Copy cs.js file in the langs subfolder of plugin
    • Rename file to yuorlangshortcut.js (for example ca.js for Catalan) - list of languages with shortcuts is here on TinyMCE page
    • Edit new language file - change lang shortcut on first row and translate it to your language (it's only 5 items, it's easy)
      Example - cs.js language file:
      tinymce.addI18n('cs',{
        "Font Awesome icons": "Font Awesome ikony",
        "Icon selection": "Výběr ikony",
        "Settings": "Nastavení",
        "Icon size": "Velikost ikony",
        "Icon color": "Barva ikony"
      });