New Post: C1 Visual Editor removes tags

I have a Bootstrap template which uses Font Awesome glyphicons (https://fortawesome.github.io/Font-Awesome/examples/) defined as classes of the <i> tag. (In fact the template uses the <i> tag for the definition of classes used for all kinds of purposes - NB the template also uses <span> tags for CSS classes as you would expect).

I have configured the Visual Editor to link to the relevant template CSS/LESS definition files.

I paste code into the Source view of the Visual Editor, e.g.

<ul class="icon">
    <li><i class="fa fa-asterisk"></i> fa-asterisk</li>
    <li><i class="fa fa-ban"></i> fa-ban</li>
    <li><i class="fa fa-barcode"></i> fa-barcode</li>
    <li><i class="fa fa-bell"></i> fa-bell</li>
    <li><i class="fa fa-bolt"></i> fa-bolt</li>
    <li><i class="fa fa-book"></i> fa-book</li>
    <li><i class="fa fa-bookmark"></i> fa-bookmark</li>
</ul>

Then I go to the Preview pane, and the bullet list showing the glyphicons appears as expected.

But if I then change the editor from from Source to Visual view the icons do not appear as expected, and upon going back to the Source view again this reveals that ALL of the <i> tags (and their corresponding class definitions) have been automatically removed/deleted by the editor! e.g. the code now appears as...

<ul class="icon">
    <li>fa-asterisk</li>
    <li>fa-ban</li>
    <li>fa-barcode</li>
    <li>fa-bell</li>
    <li>fa-bolt</li>
    <li>fa-book</li>
    <li>fa-bookmark</li>
</ul>

Is this because the <i> tag is also normally being used by the visual editor for Italics and insertion of the <em> tag?

What can be done about this?
Should I have added definitions for these items into the visual editor configuration file as well ( \Frontend\Config\VisualEditor\common.xml )?

Thanks
Jim