font Awesome IconsInnerhtml

Question

我需要能够将图标放入InnerHTML，但由于某些原因，它们没有出现。

页面仅显示很少的正方形，这意味着代码无效，那么正确的代码是什么？我无法使用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>

该类处理应用于显示内容的字体。如果不指定相关字体，浏览器将不会显示相关图标。

Answer 2

不是有效的Unicode字符。它创建了这个：请参阅

Http：//www.fileformat.info/info/unicode/char/char/f296/index.htm

不是有效的Unicode字符。它创建了这个：

不是有效的Unicode字符。它创建了这个：

即使您知道，有两种不同类型的报价标记，它们通常可以彼此封闭，因此

string = "Say 'Hello' to my little friend."

是大多数编程语言中可接受的字符串。 除非您正在尝试混淆原始问题的一部分，否则请尝试以下操作：

<script>

document.getElementById("quizQ").innerHTML =
    "<h3>which icon is used for github?</h3><br>"
    + "<i class='fa fa-gitlab' aria-hidden='true'></i><br>"
    + "<i class='fa fa-rub' aria-hidden='true'></i><br>"
    + "<i class='fa fa-github' aria-hidden='true'></i>"

</script>

我相信这是，因为字体可感知的图标由2个CSS类组成：

fa

＆

fa-iconname

Answer 3

class="fa"

添加到您的Li。如果那不起作用，请考虑建议的设置：

<li><i class="fa fa-iconname" aria-hidden="true"></i></li>

you can also try with  
enter code here enter code here
<script>
const quiz = document.getElementById("quizQ");
quiz.innerHTML =
    `<h3>which icon is used for github?</h3><br>
    <i class='fa fa-gitlab' aria-hidden='true'></i><br>
    <i class='fa fa-rub' aria-hidden='true'></i><br>
    <i class='fa fa-github' aria-hidden='true'></i>`

</script>