Estoy tratando de usar Font Awsome en mi proyecto web, he agregado el enlace:

 <script src="https://use.fontawesome.com/bedf006dec.js"></script>

Cuando agrego una fuente impresionante directamente a mi HTML de esta manera:

 <div class="topbar"> <div class="topbar__elements container"> <div class="topbar__left"> <a href="#"> <i class="fa fa-map-marker" aria-hidden="true"></i> <span> Middle East Airlines Ground Handling</span> </a> <a href="mailto:meag@meag.com.lb" target="_top" rel="noopener noreferrer"> <i class="fa fa-envelope" aria-hidden="true"></i> <span> meag@meag.com.lb</span> </a> <a href="tel:00961 1 622700"> <i class="fa fa-phone" aria-hidden="true"></i> <span> +961 1 622700</span> </a> </div> <div class="topbar__right"> <a href="#">Career</a> <a href="#">Contact Us</a> </div> </div> </div>

Funciona bien:

También estoy usando un pequeño control deslizante y quiero cambiar el texto de los botones previous y next para tener íconos de Font Awsome , sé que puedo crear botones personalizados con un pequeño control deslizante directamente en el código HTML, pero estoy tratando de usar el controles predeterminados del pequeño control deslizante, por lo tanto, para intentar cambiar el texto de estos 2 botones, estoy usando javascript :

 const prevBtn = document.querySelector(".tns-controls").firstChild; const nextBtn = document.querySelector(".tns-controls").lastChild; prevBtn.innerHTML = "<i class='fa-solid fa-angle-left' aria-hidden='true'></i>"; nextBtn.innerHTML = '<i class="fa-solid fa-angle-right" aria-hidden="true"></i>';

Pero no funciona y me da esto:

Aunque cuando abro las herramientas de desarrollo parece que funcionó.