I have a menu in which I want to append font-awesome fonts before or after the SVG icons, here my live demo jsfiddle
Here is my HTML
<span class="mobile-menu-toggle-icon">
<span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
<svg aria-labelledby="menu" class="ast-mobile-svg ast-menu-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 13h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 7h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 19h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
</svg>
</span>
<span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
<svg aria-labelledby="menu-toggle-close" class="ast-mobile-svg ast-close-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
</svg>
</span>
</span>
Here is the jquery code
var getOpenIcon = $('.ast-menu-svg');
var openHamburger =$("<span class='ast-mobile-svg ast-menu-svg'><i class='fas fa-bars'></i></span> ");
var getCloseIcon = $('.ast-close-svg');
var closeHamburger =$("<span class='ast-mobile-svg ast-close-svg'><i class='fas fa-times'></i></span> ");
getOpenIcon.insertBefore(openHamburger);
getCloseIcon.insertBefore(closeHamburger);
Instead of inserting new element before the svg icons it delete the icons, whats wrong here?