title: How to add Font Awesome to Blazor client (Razor component) app?
body: <p>I created a Blazor WebAssembly hosted template in .NET Core 3.1. Then right clicked on <em>project.Client/wwwroot/css</em> folder and clicked on <kbd>Add client side library</kbd>. Then selected the Font Awesome library and installed it. I added the below line to <em>index.html</em> <code>&lt;head&gt;</code>.</p>
  <pre><code> &lt;link href=&quot;css/font-awesome/css/fontawesome.css&quot; rel=&quot;stylesheet&quot;/&gt;
  </code></pre>
  <p>I have <em>libman.json</em> of:</p>
  <pre><code>{
    &quot;version&quot;: &quot;1.0&quot;,
    &quot;defaultProvider&quot;: &quot;cdnjs&quot;,
    &quot;libraries&quot;: [
      {
        &quot;library&quot;: &quot;font-awesome@5.11.2&quot;,
        &quot;destination&quot;: &quot;wwwroot/css/font-awesome/&quot;
      }
    ]
  }
  </code></pre>
  <p>I added just the below line to the default Blazor template page <em>Counter.razor</em> (Razor component). The IntelliSense finds the font:</p>
  <pre><code>@page &quot;/counter&quot;
  
  &lt;h1&gt;Counter&lt;/h1&gt;
  
  &lt;span class=&quot;fa fa-save&quot;&gt;&lt;/span&gt;
  
  @code {}
  </code></pre>
  <p>but I only see a square:</p>
  <p><a href="https://i.stack.imgur.com/eCCXr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCCXr.png" alt="enter image description here" /></a></p>