javascript - Font Awesome 图标 innerHTML

Question

我需要能够将图标放入 innerHTML，但由于某些原因它们没有显示。

页面只显示小方 block ，表示代码无效，那么正确的代码是多少？我不能使用 i 标签，因为它们有引号:""以显示类名和 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>

Answer 1

您需要添加fa 类:

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.