Font Awesome icons innerHTML

I need to be able to put the icons into the innerHTML, but for some reason they aren't showing up.

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.

document.getElementById("quizQ").innerHTML = "<h3>which icon is used for github?</h3><br>" + "<li>&#xf296;</li><br>" + "<li>&#xf113;</li><br>" + "<li>&#xf281</li>"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
</header>
<main>
<div id="quizQ">

</div>
</main>
<footer>
</footer>

Solution

You need to add the fa class:

document.getElementById("quizQ")
  .innerHTML = "<h3>which icon is used for github?</h3><br>" +
               "<li class='fa'>&#xf296;</li><br>" + 
               "<li class='fa'>&#xf113;</li><br>" + 
               "<li class='fa'>&#xf281</li>"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
</header>
<main>
<div id="quizQ">

</div>
</main>
<footer>
</footer>

That class handle the font that should be used to display the content. Without specifying the relevant font the browser will not display the relevant icon.