'Dynamically created icon is there but not visible

I've written my code in such a way that when the user drops a draggable element into a valid drop target the code dynamically creates an icon element using font awesome. However, the icon in question isn't visible. Don't know how to go about solving this issue. Attempts at using CSS rules such as "display: block", "display visible" didn't help. I need some guidance please

const imageContainer = document.querySelectorAll(".imgContainer");
const droppables = document.querySelectorAll(".drop");
const container2 = document.querySelector(".container2");
console.log(container2)


let currentDrag = null;

imageContainer.forEach(function(el) {
  el.addEventListener("dragstart", dragStart);
  el.addEventListener("dragend", dragEnd);
});

function dragStart(e) {
  currentDrag = e.target;
  console.log("start");
}

function dragEnd() {
  console.log("end");

  currentDrag = null;
}

droppables.forEach(function(droppable) {
  droppable.addEventListener("dragenter", dragEnter);
  droppable.addEventListener("dragover", dragOver);
  droppable.addEventListener("dragleave", dragLeave);
  droppable.addEventListener("drop", drop);
});

function dragEnter(e) {
  e.preventDefault();
}
function dragOver(e) {
  e.preventDefault();
}
function dragLeave() {
  console.log("has left");
}
function drop(e) {
  let imgSrc = currentDrag.src;
  let x = this.id;
  let newRegex = new RegExp(x, "g");
  let searchResult = newRegex.test(imgSrc)
  if(!searchResult) return
    e.preventDefault();
    currentDrag.parentElement.style.display = "none";
    // setTimeout(() => currentDrag.parentNode.style.display = "none", 2000);
    this.append(currentDrag);
    setTimeout(() => this.style.display = "none", 2000);
    container2.innerHTML = "<i class=fa-solid fa-circle-check icon></i>"
}

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.imgContainer {
  width: 300px;
  height: 300px;

}

.drop {
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border: solid black 1px;
}


img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container2 {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.fa-solid {
  width: 30px;
  height: 30px;
  display: visible;
  color: grey;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DragAndDrop3.0</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous">
  </head>
  <body>
    <div class="parent">
      <div class="container1">
        <div class="imgContainer bolt"  draggable="true">
          <img src="imgs/bolt.jpeg"  alt="">
        </div>
        <div class="imgContainer jordan"  draggable="true">
          <img src="imgs/jordan.jpeg"  alt="">
        </div>
        <div class="imgContainer senna"  draggable="true">
          <img src="imgs/senna.jpeg" alt="">
        </div>
        <div class="imgContainer ronaldo"  draggable="true">
          <img src="imgs/ronaldo.jpeg"  alt="">
        </div>
        <div class="imgContainer tyson"  draggable="true">>
          <img src="imgs/tyson.jpeg" alt="">
        </div>
      </div>

      <div class="container2">
        <p class="rightAnswer"></p>
        <div class="athelteInfo"></div>
      </div>

      <div class="container3">
        <div class="drop runner bolt" id="bolt">runner</div>
        <div class="drop basketball jordan" id="jordan">basketball</div>
        <div class="drop soccer ronaldo" id="ronaldo">soccer</div>
        <div class="drop F1 senna"  id="senna">formula 1</div>
        <div class="drop box tyson" id="tyson">box</div>
      </div>
    </div>

    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Dynamically created icon is there but not visible

Sources

Related Questions