Visual Composer text block conflict with font awesome
I'm building a website on WordPress that uses a theme called Total, the Visual Composer plugin and Font Awesome, when I add for eg. <i class="fa fa-facebook"></i> to the text area of a text block and then save the text block view the page all is fine and dandy (displays fine) but as soon as I go back into the back-end and RE-OPEN the text block the text block is now empty - the <i class="fa fa-facebook"></i> has vanished. I'm assuming there has to be a JS conflict but have no idea where to search for the issue and how to even begin troubleshooting.
Help will be much appreciated.
thanks! Matthew McEwan
Visual Composer defaults back to "Visual" editor mode when you return to edit, and thus breaks the code you created in "Text" editor mode. As you see, it erases your links but leaves the FontAwesome code itself intact.
There are two different ways I've confirmed that will allow you to get around this:
Replace your Text Block with a Raw HTML block -- Within Visual Composer, search for a module called "Raw HTML". Place your content within this block and save. Any additional text formatting you did will have to be done manually.
Install the Raw HTML plugin for WordPress -- This plugin also prevents the HTML from being stripped. It also goes a step further: this plugin allows you to disable the Visual Editor altogether, on certain types of posts. It has some other interesting features, too.
Hope this help you!
Here's a trick that I do so the icon code wont be erased during editing.
on your text block, enclose this code within your icon code:
<span style="color: #fff;">.</span>
It will look like this:
<i class="fab fa-facebook"><span style="color: #fff;">.</span></i>
Hope this little trick will help.