I'm trying to use Font Awsome in my web poject, I've added the link:

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

When I add font awesome directly to my HTML like this:

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

It works fine:

I'm also using tiny slider and I want to change the text of the previous and next buttons to have Font Awsome icons, I know that I can create custom buttons with tiny slider directly in the HTML code but I'm trying to use the default controls of tiny slider, therefore to try and change the text of these 2 buttons I'm using 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>';

But it doesn't work and give me this:

Even though when I open the developer tools it looks like as if it worked.