[SOLVED] Adding <i> </i> with any Favicon icon and its automatically creating <SVG> tags in Trumbowyg Editor

Adding <i> </i> with any Favicon icon and its automatically creating <SVG> tags in Trumbowyg Editor

Here, In the Trumbowyg editor of project getting some issue.

Actually when I am trying to add code this in source code:

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <i class="fa fa-angle-down"></i> 
</label>

It's Automatically converting this code later with SVG tags like below:

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <svg class="svg-inline--fa fa-angle-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg><!-- <i class="fa fa-angle-down"></i> --> 
</label>

I don't want to use SVGs in my code. so anyways I can stop this in Trumbowyg Editor?

I tried multiple ways as mentioned in Documentation.

First of all, I tried to use:

$.trumbowyg.svgPath = false;

Then:

$.trumbowyg.svgAbsoluteUsePath = true;

Then I tried to Use semantic Property to remove tags and then I tried to use tagsToKeep property as well. I tried all this options with different combination but some how unable to solve the issue.

I just want that if I write :

<i class="fa fa-angle-down"> </i>

in source code of editor. It should not convert this code to SVG tag. Please anyone help me with this issue.

Here, check video recording.

Solution

 <script type="text/javascript">
       window.FontAwesomeConfig = { 
       autoReplaceSvg: false }
 </script>

You can try with above scripting code in your main view file.