As mentioned in the title, the TinyMCE editor of WordPress cuts off the href tag that I have inside the span tag. Below is the code i use

<h5>
    <a href="#" target="_blank" rel="noopener noreferrer">
    <i class="fa fa-map-marker" aria-hidden="true"></i> Find us</a>  
    <span class="icon-right"><a href="https://testsite.com/test-gallery/" target="_blank" rel="noopener noreferrer">
        <i class="fas fa-images" aria-hidden="true"></i>
    </a>
    </span>
</h5>

So every time I switch from text to visual and then back to text, this is the result of the code:

<h5>
    <a href="#" target="_blank" rel="noopener">
        <i class="fa fa-map-marker" aria-hidden="true"></i> Find us</a> 
        <span>
            <i class="fas fa-images" aria-hidden="true"></i>
        </span>
</h5>

I have tried the answer that was suggested here How to disable TinyMCE from removing span tags

but i don’t believe that ['valid_elements'] = '*[*]'; it’s the best and safest option. Also after some search other solutions like “add a class in the span” or “empty spans are stipped off”, are not the case here.

So I try to figure out why this happens, or if I miss something.