The hamburger icon toggles to times icon but the reverse does not happen. The event handler is removed from the svg tag with the same id after first click. No other code exists in js file.
$(document).ready(function() {
$('#menu-bar').click(function() {
$(this).toggleClass('fa-times');
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-bar" class="fas fa-hamburger"></div>The problem was with the fontawesome file all.js or all.min.js. The right files to be included when using font awesome for icons are:
<link rel="stylesheet" type="text/css" href="staticAssets/css/all.min.css">
<script type="text/javascript" src="staticAssets/js/fontawesome.min.js"></script>
Its better to include all the files downloaded for font awesome at one place, since the files also have relative paths, which might show up as errors in console.