FontAwesome tags removed when switching between Source and Wysiwyg

Question

I am using http://fortawesome.github.com/Font-Awesome/ - popular iconic font

When I insert "i" tag i.e. it is saved only in source mode enabled, but removed from html when saving in wysiwyg mode.

How to avoid removing i tag? (using Ckeditor with Drupal 7 and Wysiwyg module)

Answer 1

As Vic Nicethemer pointed out - the solution (for me) was to add   within the <i> and </i> like so: <i class="icon-facebook">&nbsp;</i>.

CKEDitor removes elements that do not have any internal content...

Answer 2

Adding &nbsp between the tags isn't the greatest since it's adding additional unneeded markup.

To do this a better way I suggest creating a custom WYSIWYG module to tweak the CK Editor settings.

Basically, create a module that adds a ckeditor-config.js for extra configuration settings with hook_wysiwyg_editor_settings_alter()

Inside the file you add:

CKEDITOR.editorConfig = function( config ) {

  // allow i tags to be empty (for FontAwesome)
  CKEDITOR.dtd.$removeEmpty['i'] = false;

}

Here is a CK WYSIWYG Tweaks module on Github I created, download and install like a regular module if you have WYSIWYG w/ CK editor already running. Then add any other tweaks you need, the tweak to stop disappearing tags is alread there!

Answer 3

I created an unrestricted_html format under /admin/config/content/formats/ that I only give to administrators.

I unchecked [ ] Limit allowed HTML tags & [ ] WYSIWYG Filter & was able to use the <i> tags successfully.

I also don't have a Wysiwyg profile associated with this format. My assumption is that as an administrator, more likely than not, they know how to write raw html.

Answer 4

You've probably enabled the "Limit allowed HTML tags" option. In this case You've to enable the "i" tag on the input format filter.

1. Open admin/config/content/formats
2. Click "configure" on the input format you're using
3. Add <i> on "Allowed HTML tags" setting

Answer 5

Here's another method of forcing CKEditor not to strip out empty <i> without adding a new text format (or exposing your site to insecure code):

1. Edit your CKEditor profile. (For me, it was admin/config/content/ckeditor/edit/Advanced.)
2. Scroll down to the bottom and expand the "Advanced options" fieldset.
3. In the "Custom JavaScript configuration" field, add the following: config.allowedContent = true; CKEDITOR.dtd.$removeEmpty.i = 0;

(These instructions originaled from https://www.drupal.org/node/2385795#comment-9681661 with some minor tweaks.)