SuperUser Account
/ Categories: DNN | Evoq, DNN Summit 2018

Add Font Awesome Icons Selector to Toolbar in DNN CMS CK Editor

Easily choose color, size, animation of Font Awesome icons in DNN

Overview:

  1. Add 4 Plugins to HTML Editor Provider
    [FontAwesome, Widget, WidgetSelection, LineUtil ] : [ root > Providers > htmlprovid... > DNNCk... > js > cked... > 4.. > plugins ]

  2. Add FA PNG file to Icon Folder
    [ fontawesome.png ] : [ root > Providers > htmlprovid... > DNNCk... > js > cked... > 4.. > icons]

  3. Add Config.js & FontAwesome CSS to Portal Folder
    [ fontawesome.png ] : [ root > Providers > htmlprovid... > DNNCk... > js > cked... > 4.. > icons]

  4. Go to Custom Editor Options and Configure
    Load config, fa css and js files
    Add FontAwesom and Widget to Extra Plugins
    Remove Protected source for <span> and <i>
    Modify Toolbar Buttons and Sets XML files

Tips & Requirements

  • Turn off Popups in DNN (required to work)
  • Clear Cache / Sync Files when necessary in DNN
  • Works with Font Awesome Version 4
Previous Article Update Page Icons in DNN 9 via Action Forms
Print
824 Rate this article:
No rating

Documents to download

Please login or register to post comments.

Add Content...