字体棒极了图标innerHTML

问题描述：

我需要能够将图标放入innerHTML，但由于某些原因，他们没有显示出来。字体棒极了图标innerHTML

页面只显示小方块，表示代码无效，那么正确的代码是什么？我不能使用i标签，因为它们有引号：“”以显示类名和真实属性为隐藏的aria。

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>

*您可以*和*应*使用''标签;你只需要正确地做。 – Pointy

答

您需要添加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>

该类处理应该被用来显示内容的字体。没有指定相关的字体，浏览器将不会显示相关的图标。

谢谢，这工作！ – hannacreed

答

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

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

答

由于您的默认浏览器字体中不存在unicode实体，因此您会看到方块。

&＃xf296;不是有效的Unicode字符。它创建了这个：＆＃xf296;见http://www.fileformat.info/info/unicode/char/f296/index.htm

&＃xf113;不是有效的Unicode字符。它创建了这个：＆＃xf113;

&＃xf281;不是有效的Unicode字符。它创建了这个：＆＃xf281;

大家知道，有两种不同类型的引号，并且它们通常可以相互包围，因此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>

字体棒极了图标innerHTML

相关推荐