title: Font Awesome icons innerHTML
body: <p>I need to be able to put the icons into the innerHTML, but for some reason they aren't showing up. </p>
  
  <p>The page is just showing little squares, which means that the code is invalid, so what is the correct code? I can't use the i tags because they have quotation marks: "" in the to show the class name and the true property for aria-hidden. </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>document.getElementById("quizQ").innerHTML = "&lt;h3&gt;which icon is used for github?&lt;/h3&gt;&lt;br&gt;" + "&lt;li&gt;&amp;#xf296;&lt;/li&gt;&lt;br&gt;" + "&lt;li&gt;&amp;#xf113;&lt;/li&gt;&lt;br&gt;" + "&lt;li&gt;&amp;#xf281&lt;/li&gt;"</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;header&gt;
  &lt;/header&gt;
  &lt;main&gt;
  &lt;div id="quizQ"&gt;
  
  &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>