0

I am able to generate the html table using the javascript code, but the fontawesome icon is not appearing. I tried so many things but still the same issue.

Here is the code snippet:

var tableBody = document.getElementById("tableBody");
var tr = document.createElement('tr');
tableBody.appendChild(tr);
var td1 = document.createElement('td');
td1.setAttribute("class","fas fa-file-pdf");
td1.appendChild("<span class='fas fa-file-pdf'></span>");
tr.appendChild(td1);

I also tried below code and it is also not working:

content +="<tr><td><i class='fas fa-file-pdf fa-2x'></i></td><td>N/A2</td><td>N/A3</td><td>N/A4</td></tr>

For testing purpose, I created the dummy html table and it is working as expected:

<table>
   <tr><td><span class='fas fa-file-pdf fa-2x'></span></td> <td>2</td> <td>3</td> <td>4</td></tr>
   <tr><td><i class="fas fa-file-pdf fa-2x"></i></td><td>N/A2</td><td>N/A3</td><td>N/A4</td></tr>
  </table>

imports I am using is

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>

Thank you for your help.

Krish
  • 1
  • This issue would be easier to diagnose if you could create a reproducible test case using https://jsfiddle.net/ because we could see the javascript console and debug you running code. – Rick Suggs Mar 21 '18 at 20:23

1 Answers1

0
content +='<tr><td><i class="fas fa-file-pdf fa-2x"></i></td><td>N/A2</td><td>N/A3</td><td>N/A4</td></tr>'

This should work. just switch ' with "

Thomas
  • 2,431
  • 17
  • 22
  • I just tried and its not working. The 1st is empty. – Krish Mar 21 '18 at 18:53
  • Does it render something else? If the rendered code is the same then look in devtools->css wether fa is loaded. – Thomas Mar 21 '18 at 18:54
  • The 1st is empty. – Krish Mar 21 '18 at 18:55
  • Then something else is wrong. Try to make a little jsfiddle with your code and append it to your question. – Thomas Mar 21 '18 at 18:56
  • I create the demo page and I was not able to reproduce the issue. I finally copied the html generated for the fontawesome icon and it worked. Thank you for the help. – Krish Mar 24 '18 at 23:58