html - Font Awesome icons not working in succession

Question

I'm trying to add font awesome icons to my wordpress site using the Stratford theme. When I add them in the page it looks fine in the editor (see below) but if I preview or publish the page it messes the page up a lot.

Green FA icons and text exactly how I want it to appear, in the editor view

The same page but after I click "Preview" or publish it

I tried contacting Wordpress support they told me to contact Font Awesome, and FA pointed me to here, where i couldn't find a similar issue

Answer 1

You're not closing the <span> tag.

Any non-void elements has to be open and closed.

<p> <!--open p tag-->
<span style="color:#008000" class="has-inline-color"> <!--open span tag-->
<i class="fas fa-check"></i>
Websites &amp; Apps
</span> <!--close span tag-->
</p> <!--close p tag-->