Police Awesome icons innerHTML

Question

Je dois être capable de placer les icônes dans innerHTML, mais pour une raison quelconque, elles n'apparaissent pas.

La page ne montre que des petits carrés, ce qui signifie que le code n'est pas valide, alors quel est le bon code? Je ne peux pas utiliser les tags i parce qu'ils ont des guillemets: "" dans le pour montrer le nom de la classe et la vraie propriété pour 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

Vous devez ajouter la classe 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>

Cette classe gère la police qui doit être utilisé pour afficher le contenu. Sans spécifier la police appropriée, le navigateur n'affiche pas l'icône correspondante.

Answer 2

je crois qu'il est, parce que les icônes de police-awesome se composent de 2 classes CSS: fa & fa-iconname. Les symboles que vous utilisez correspondent probablement à la seconde, mais pas à la première.

Je suggère d'ajouter class="fa" à vos li. Si cela ne fonctionne pas, considérez la configuration suggérée: <li><i class="fa fa-iconname" aria-hidden="true"></i></li>

Answer 3

Vous obtenez les carrés car vos entités Unicode n'existent pas dans votre police de navigateur par défaut.

& # xf296; n'est pas un caractère Unicode valide. Cela crée ceci: & # xf296; Voir http://www.fileformat.info/info/unicode/char/f296/index.htm

& # xf113; n'est pas un caractère Unicode valide. Il crée ceci: & # xf113;

& # xf281; n'est pas un caractère Unicode valide. Cela crée ceci: & # xf281; Comme vous le savez, il existe deux types différents de guillemets, et ils peuvent généralement être placés l'un dans l'autre. string = "Say 'Hello' to my little friend." est une chaîne acceptable dans la plupart des langages de programmation.

À moins que vous essayez d'obscurcir le code source, ce qui ne fait pas partie de votre question initiale, essayez ceci:

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