TinyMCE removes classes from <span> and <i> elements

Question

In code (source) editor of TinyMCE, when I want to add some span or i element with classes (for example, when I want to add Font Awesome icon) - TinyMCE removes classes. For example, if I want to add:

<span class="fa fa-university"></span>

at the end I will have just:

<span></span>

Also, in source code editor I tried to add <i class="fa fa-university"></i> but the problem is same - classes are deleted by TinyMCE (<i></i>).

I am using TinyMCE v4.4.1 and these are my settings:

tinymce.init({
    selector: '#body',
    height: 500,
    theme: 'modern',
    plugins: [
        'advlist autolink lists link image charmap preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern codesample fontawesome noneditable'
    ],
    toolbar1: 'insertfile undo redo | formatselect fontselect fontsizeselect fontawesome',
    toolbar2: 'bold italic underline strikethrough forecolor backcolor removeformat superscript subscript | alignleft aligncenter alignright alignjustify | outdent indent',
    toolbar3: 'code preview | link unlink anchor image media | codesample | bullist numlist table blockquote hr nonbreaking | charmap emoticons | visualchars visualblocks',
    image_advtab: true,
    relative_urls: false,
    extended_valid_elements: 'span',
    content_css: '/css/all.css' // this includes fontwawesome...
});

Answer 1

Try adding the following to your TinyMCE configuration:

valid_elements: "*[*]"

When I do this I can add the <span> you reference without issue.

Answer 2

I know this is an old question but this worked for me

extended_valid_elements: 'span[*]'