How to allow empty "i" html tags in ckeditor

In order to allow the empty "i" html tags in ckeditor please follow this process

Process

1. Add the following configuration to your custom ckeditor.config.js (located in the following Path and within the defined Function)

  • Path: sites/all/modules/ckeditor/ckeditor.config.js
  • Function : CKEDITOR.editorConfig 
​CKEDITOR.editorConfig = function(config) {
.
.
. 
// allow i tags to be empty (for font awesome)
    config.protectedSource.push(/<i[^>]*><\/i>/g);
    CKEDITOR.dtd.$removeEmpty['i'] = false;
    config.allowedContent = 'p i(*); strong em strike cite blockquote code ul ol li dl dt dd br h2 h3 h4 h5;a[!href,title];img[!src,width,height,alt,title]{width,height,text-align,float};table thead tbody tr th td[*]{*}(*)';

}

2. Clear browser cache

3. Get into the CKeditor Configurations

4. Edit the profile that you are using to write your text

 

5. Get into Advanced Content Filter and Disable the filter option

Reference

http://www.nodenerd.com/configure-ckeditor-allow-enterting-empty-tags