import font awesome in web component

This is my header component :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<!-- end snippet -->

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?

Since the font-awesome icon fonts are not being loaded in your web component, the icons are not being displayed. To solve this, you can load the font-awesome in your web component using the link tag in your template.

Here's how you can modify your template:

const template = document.createElement("template");
template.innerHTML = `
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-jkihXtPklFJy8q3rnoEMBstczhBwFwO48lEQ7EDKlA5JX7xu5Q0NVg7lLeK/cHhV7hly0iygDRNyo6N88U6B9g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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>`;

for use in shadowDOM you need to load the CSS both in shadowDOM and globalDOM.

Make your component check if the link exists in globalDOM,
if not; the Web Component adds the href

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

customElements.define('my-fa-element', class extends HTMLElement {
  constructor() {
    let href = "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.0/css/all.min.css";
    super().attachShadow({mode:'open'})
           .innerHTML = `<style>@import url('${href}')</style>` +
           [`check`,`square-check`,`circle-check`,`gear`]
             .map(icon=>`fa-${icon}: <i class="fa fa-${icon}"></i><br>`).join("");
    if (!document.querySelector(`link[href="${href}"]`)) {
      document.head.append(
        Object.assign(document.createElement("link"), {
          rel: "stylesheet",
          href
        }))
    };
  }
});

<!-- language: lang-html -->

<my-fa-element></my-fa-element>

<!-- end snippet -->