フォントAwesome icons 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>

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

私は、フォント素晴らしいアイコンが2つのCSSクラスで構成されているので、それは、あると信じて：fa & fa-iconname。使用しているシンボルはおそらく2番目のシンボルに対応しますが、最初のシンボルには対応しません。

私はあなたの李にclass="fa"を追加することをお勧めします。それでも問題が解決しない場合は、推奨設定を検討してください。<li><i class="fa fa-iconname" aria-hidden="true"></i></li>

Answer 3

ユニコードエンティティがデフォルトのブラウザフォントに存在しないため、四角形が表示されています。

&＃xf296;有効なユニコード文字ではありません。それは次を作成します：＆＃xf296; http://www.fileformat.info/info/unicode/char/f296/index.htm

&＃xf113;有効なユニコード文字ではありません。これは次を作成します：＆＃xf113;

&＃xf281;有効なユニコード文字ではありません。これを作成します：＆＃xf281;

2種類の引用符があり、通常は相互に囲むことができるので、ほとんどのプログラミング言語では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>