title: Switching between font awesome icons
body: <p>I'm trying to switch between icons using the unicode.  I'm not sure what i'm doing wrong, I've tried switching using their className instead, that didn't work for me either, any answers are appreciated. 
  (I would like to use vanilla javascript only no jquery)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const burger = document.getElementById('toggle');
  
  burger.addEventListener('click', (e) =&gt; {
    const tog = e.target;
    if (tog.innerHTML === "&amp;#xf0c9") {
      nav.style.display = "flex";
      tog.innerHTML = "&amp;#xf00d";
    } else {
      nav.style.display = "none";
    }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="navbar"&gt;
    &lt;i class="fa" id="toggle"&gt;&amp;#xf0c9&lt;/i&gt;
  
    &lt;nav class="menu"&gt;
      &lt;a href="#"&gt;Home&lt;/a&gt;
      &lt;a href="#"&gt;About&lt;/a&gt;
      &lt;a href="#"&gt;Gallery&lt;/a&gt;
      &lt;a href="#"&gt;Contact&lt;/a&gt;
      &lt;a href="#"&gt;Search&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>