font awesome - Adding Fontawesome to ckeditor -

i using fontawesome in website , have own cms edit website pages. develop dialog user can pick fontawesome icon ok add them in codeview of ckeditor.

icons added content not shown in ckeditor designview. have changed ckeditor config file editor accepts tags (*). added fontawesome css file @import rule contents.css still no fontawesome icon visible in editor area.

(*)config.js

config.allowedcontent = true; config.protectedtags = 'i' ; config.protectedsource.push( /<i[\s\s]*?\>/g ); //allows beginning <i> tag config.protectedsource.push( /<\/i[\s\s]*?\>/g ); //allows ending </i> tag 

what can make work?

config.protectedsource.push( /<i class[\s\s]*?\>/g ); config.protectedsource.push( /<\/i>/g ); 

what have interfere img tags. , or, after of config:

ckeditor.dtd.$removeempty['i'] = false; 

both work well. sure have cleared cache when making changes.

*edit 1 works while messing else up. no go solution.

i stopped using bulky editor. created own. however, solve solution, use em or span instead of tags this.