Schriftart Awesome icons innerHTML

Question

Ich muss in der Lage sein, die Symbole in das innereHTML zu setzen, aber aus irgendeinem Grund werden sie nicht angezeigt.

Die Seite zeigt nur kleine Quadrate, was bedeutet, dass der Code ungültig ist, also was ist der richtige Code? Ich kann die i-Tags nicht verwenden, weil sie Anführungszeichen haben: "", um den Klassennamen und die wahre Eigenschaft für aria-hidden anzuzeigen.

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

Sie benötigen die fa Klasse hinzuzufügen:

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>

Diese Klasse behandeln die Schriftart, die verwendet werden sollte, um den Inhalt anzuzeigen. Ohne Angabe der entsprechenden Schriftart zeigt der Browser das entsprechende Symbol nicht an.

Answer 2

Ich glaube, es ist, weil die Schrift-awesome Symbole von 2 CSS-Klassen bestehen: fa & fa-iconname. Die verwendeten Symbole entsprechen wahrscheinlich der zweiten, aber nicht der ersten.

Ich würde vorschlagen, class="fa" zu Ihren li hinzuzufügen. Wenn das nicht funktioniert, berücksichtigen Sie die vorgeschlagene Konfiguration: <li><i class="fa fa-iconname" aria-hidden="true"></i></li>

Answer 3

Sie erhalten die Quadrate, weil Ihre Unicode-Entitäten in Ihrer Standardbrowserschrift nicht vorhanden sind.

& # xf296; ist kein gültiges Unicode-Zeichen. Es erstellt das: & # xf296; Siehe http://www.fileformat.info/info/unicode/char/f296/index.htm

& # xf113; ist kein gültiges Unicode-Zeichen. Es erstellt das: & # xf113;

& # xf281; ist kein gültiges Unicode-Zeichen. Es erstellt das: & # xf281;

Nur so dass Sie wissen, gibt es zwei verschiedene Arten von Anführungszeichen, und sie können in der Regel gegenseitig eingeschlossen werden, so string = "Say 'Hello' to my little friend." ist eine zulässige Zeichenfolge in den meisten Programmiersprachen.

Es sei denn, Sie versuchen, den Quellcode zu verschleiern, die nicht Teil Ihrer ursprünglichen Frage ist, versuchen Sie dies:

<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>