CODEWITHSUNDEEP
javascripthtmlfont-awesome
MidnightForm
MidnightForm

Reputation: 39

Font awesome icons and panels not showing properly when using JS

I'm trying to create HTML elements dynamically with JS. However panels and font awesome icons are not shown properly when doing so.

This is the HTML code I want to create dynamically with JS.

<div class="row" id="row">
    <div class="col">
        <div class="panel-custom border colorized">
            <div class="fa fa-chevron-right right-arrow"></div>
        </div>
    </div>
</div>

My JS code:

  let row = document.getElementById('row');
  let col = document.createElement('col');
  let panelCustom = document.createElement('panel-custom');
  let fa = document.createElement('fa');

  panelCustom.classList.add("colorized");
  panelCustom.classList.add("border");
  fa.classList.add("fa-chevron-right");
  fa.classList.add("right-arrow");

  row.appendChild(col);
  col.appendChild(panelCustom);
  panelCustom.appendChild(fa);

Upvotes: 2

Views: 83

Answers (2)

Raphael Deiana
Raphael Deiana

Reputation: 750

You can try this ( it should work as expected ) :

let row = document.createElement('div');
row.className = "row";

let col = document.createElement('div');
col.className = "col";

let panelCustom = document.createElement('div');
panelCustom.className = "panel-custom colorized border";

let fa = document.createElement('i');
fa.className = "fa fa-chevron-right right-arrow";

panelCustom.appendChild(fa);
col.appendChild(panelCustom);
row.appendChild(col);
document.body.appendChild(row);
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>

Upvotes: 3

Alexander van Oostenrijk
Alexander van Oostenrijk

Reputation: 4754

You can't actually create elements of type "col", "panel-custom" or "fa", like you're trying to here:

let col = document.createElement('col');
let panelCustom = document.createElement('panel-custom');
let fa = document.createElement('fa');

These are not valid HTML elements. In fact, they should be <div> elements as in your HTML sample. Create <div> elements instead:

let col = document.createElement('div');
let panelCustom = document.createElement('div');
let fa = document.createElement('div');

Then add the required classes:

panelCustom.classList.add("panel-custom");
panelCustom.classList.add("colorized");
panelCustom.classList.add("border");
// etc.

Upvotes: 1

Related Questions