Font Awesome图标innerHTML

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>

- hannacreed

---

你可以并且应该使用<i>标签；你只需要正确地使用它。 - Pointy

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>

那个类处理应用于显示内容的字体。如果没有指定相关字体，浏览器将无法显示相关图标。

- Dekel

---

如何使它们可点击？ - Moeez

你可以尝试：<li class='fa' onClick='handleClick'>&#xf296;</li> - Dekel

Answer 2

您之所以看到方块，是因为您的默认浏览器字体中不存在您的Unicode实体。

 不是有效的Unicode字符。它会创建这个符号： 请参见http://www.fileformat.info/info/unicode/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>

- user176717

Answer 3

我认为是这样的，因为font-awesome图标由两个CSS类组成：fa和fa-iconname。你正在使用的符号可能对应于第二个，但不是第一个。

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

- nGAGE