DNN Summit 2018 Session:

Configure DNN for End-User Ease

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

Rate this article:
No rating
Print

Documents to download

Comment

You don't have permission to post comments.