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, 5.15.2, 5.15.3, 5.15.4
  • 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"
      });             
Our other TinyMCE plugins: