Keep html href links intact when using Fonts Awesome in the Magento2 editor

You may have found that using the Magento2 editor it removes <a href> tags if they enclose in <div> tags. For example, if you are wanting to use Fonts Awesome to display a social media icon or some such thing:

<a href="page.html"><div class="instagram"></div></a>

annoyingly the M2 editor will be reduce/correct this to "<div class="instagram">&nbsp;</div>". So how do we solve this?

The answer is to wrap some text in an <em> tag. This allows you to then use CSS to remove the text eg.

<div><a href="https://www.instagram.com/startnet/" target="_blank" rel="noopener"><span class="instagram"><em>Instagram</em></span></a></div>

CSS:
span.instagram em { display:none; }

Hope that makes sense!

Leave a Reply