Visual Editor removes Font Awesome code

I have found that the Visual Editor will remove FontAwesome code if the parent tag has no content. For example,

<div style="margin-bottom: 25px;"><i class="fa fa-flag fa-4x"></i></div>

will become

<div style="margin-bottom: 25px;"></div>

if you visit the Visual Editor. Needless to say this can be very troublesome. A simple solution that I found from https://generatepress.com/forums/topic/font-awesome-stack/ is to add an HTML comment inside the surrounding tags like this:

<div style="margin-bottom: 25px;"><i class="fa fa-flag fa-4x"></i><!-- icon --></div>

The Visual Editor will then preserve the FontAwesome code.