How to add font awesome to Blazor client (razor component) app?

You also need to include the JavaScript.

<link rel="stylesheet" href="css/font-awesome/css/fontawesome.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>

You can put the <script> tag below the other one at the bottom of the file but I doubt that you'll notice any speed difference.

From a now deleted comment:

The JS is just one option (the preferred option), but CSS only is still an option as well. Also, you don't use both. It's either CSS or JS

In Blazor I could only get the JS version to work. CSS only didn't work (the file was 200-OK).

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. ref

add to _hosts.cshtml (for server side)

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

Use fas as below:

@page "/counter"

<h1>Counter</h1>

<span class="fas fa-save"></span>  <!--fas not fa-->

@code {}

This is tested in blazor Net5

You can use libman (or copy the files manually from the zip available at Fontawesome website). Then install/copy only all.min.css and the whole contents of webfonts folder into wwwroot/css/font-awesome subfolder. Like this:

Then put this into Pages/_Host.cshtml (for Blazor Server) or wwwroot/index.html (Blazor Web Assembly) into the head section:

<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />

Or, as an alternative, add this at the beginning of site.css:

@import url('font-awesome/css/all.min.css');

No need for JS. It works.