import font awesome in web component – Html

This is my header component :

<header class="header">
  <div class="icon-container">
    <ul>
      <li class="list-item"><i class="fa-regular fa-bell"></i></li>
      <li class="list-item"><i class="fa-solid fa-gear"></i></li>
      <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li>
    </ul>
  </div>
</header>

This code can display the icons in fontawesome when I import the font-awesome before the closing body tag in my index.html file.

<script src="https://kit.fontawesome.com/my id.js"crossorigin="anonymous"></script>

However, now I learnt web components. I created a header.js file for my header.

const template = document.createElement("template");
template.innerHTML = `
<div class="icon-container">
      <ul>
        <li class="list-item"><i class="fa-regular fa-bell"></i></li>
        <li class="list-item"><i class="fa-solid fa-gear"></i></li>
        <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li>
      </ul>
</div>`;
class header extends HTMLElement {
  constructor() {
    super();

    // Create a shadow root
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

window.customElements.define("header-section", header);

Now, the other part of html is still rendering, but the icon disappear, so how should I solve this?