Trying to duplicate an appearance of a button from Handlebars to HTML

I'm learning Ember JS lately to help a friend on a project. His web app is rather large and so the load time is quite slow. I'm working on the UI of his load page.

I want to try re-create his header links in HTML to use while the main app loads.

Here is an example of a link in Handlebars:

 <header class="header">
     <nav class="header__nav" aria-role="navigation">
        <ul class="header__nav-list">
          <li>
            
               <span>Map</span>
            
          </li>
     </ul>
        </div>
      </nav>
</header>

My attempt to convert to HTML:

     <header class="header">
 <nav class="header__nav" aria-role="navigation">
    <ul class="header__nav-list">
        <li class="header_link"><i class="fa fa-map-marker header_icon"><a href="url.co.uk/track"><pan>Map</span></a></i><li>
 </ul>
    </div>
  </nav>
</header>

It's just outputs the link with the icon and no styles have been added, any help would be appreciated thanks.