字体真棒图标innerHTML

Question

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

页面上仅显示小方块，这意味着代码无效，那么正确的代码是什么？ 我不能使用i标记，因为它们在引号中带有引号：“”以显示aria隐藏的类名和true属性。

 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实体不存在您的默认浏览器字体中。

＆＃xf296; 不是有效的unicode字符。 它将创建以下内容：参见http://www.fileformat.info/info/unicode/char/f296/index.htm

＆＃xf113; 不是有效的unicode字符。 它创建此：

＆＃xf281; 不是有效的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>

Answer 3

我相信是因为字体真棒图标由2个CSS类组成： fa ＆ fa-iconname 。 您使用的符号可能与第二个符号相对应，但与第一个不对应。

我建议将class="fa"添加到您的li的。 如果这不起作用，请考虑建议的设置： <li><i class="fa fa-iconname" aria-hidden="true"></i></li>