JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<nav class="nav">

  <div class="responsive-menu">
    <label for="menu"></label>
    <input type="checkbox" id="menu">
    <ul class="menu">

      <li class="static menu active" id="static-home"><a href="https://demo.pluxml.org/" title="Accueil">Accueil</a></li>
      <li class="static menu noactive" id="static-1"><a href="https://demo.pluxml.org/index.php?static1/statique-1" title="Statique 1">Statique 1</a></li>
    </ul>
  </div>

</nav>

CSS

a {
  text-decoration: none;
}

a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* si besoin , (dé)commenter et affubler des valeurs qui te conviennent */
  vertical-align: middle;
  color: red;
  font-size: 2em;
  padding: 0 0.5em;
}
a:hover::before {
  color:inherit;
}

a[title="Accueil"]::before {
  content: "\f015";
}

a[title="Statique 1"]::before {
  content: "\f1ea"
}