Hi Julie,
This is caused by the WYSIWYG editor deleting empty elements. It is an attempt by the editor to "clean up" code that it thinks is incorrect, and can be pretty annoying. There are two ways to fix it:
- Simply add a comment inside your empty
<i> tag, so it will read <i class="fa fa-camera-retro fa-lg"><!-- don't delete this icon! --></i>
This will prevent the editor from seeing it as an empty element, so it won't be deleted.
- Change the WYSIWYG settings so that it no longer deletes empty elements. To do this, navigate to your site's root folder, then to /clientscripts/ckeditor-mojoconfig.js. Inside this file, you'll want to paste the following code at the very bottom (note: it must be after the last line, which should be
}; ).
$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
CKEDITOR.dtd.$removeEmpty[i] = false;
});
Hope this helps!