CODEWITHSUNDEEP
javascripthtmliconsfont-awesome
hannacreed
hannacreed

Reputation: 649

Font Awesome icons innerHTML

I need to be able to put the icons into the innerHTML, but for some reason they aren't showing up.

The page is just showing little squares, which means that the code is invalid, so what is the correct code? I can't use the i tags because they have quotation marks: "" in the to show the class name and the true property for 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>

Upvotes: 4

Views: 14843

Answers (3)

user176717
user176717

Reputation: 76

You're getting the squares because your unicode entities don't exist in your default browser font.

&#xf296; is not a valid unicode character. It creates this:  See http://www.fileformat.info/info/unicode/char/f296/index.htm

&#xf113; is not a valid unicode character. It creates this: 

&#xf281; is not a valid unicode character. It creates this: 

Just so you know, there are two different types of quotation marks, and they can usually be enclosed within each other, so string = "Say 'Hello' to my little friend." is an acceptable string in most programming languages.

Unless you're trying to obfuscate the source code, which isn't part of your original question, try this:

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

Upvotes: 3

nGAGE
nGAGE

Reputation: 177

I believe it is, because the font-awesome icons consist of 2 css classes: fa & fa-iconname. The symbols you're using probably corresponds with the second, but not the first.

I'd suggest adding class="fa" to your li's. If that doesn't work, consider the suggested setup: <li><i class="fa fa-iconname" aria-hidden="true"></i></li>

Upvotes: 0

Dekel
Dekel

Reputation: 62556

You need to add the fa class:

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>

That class handle the font that should be used to display the content. Without specifying the relevant font the browser will not display the relevant icon.

Upvotes: 4

Related Questions