'How to add Font Awesome to Blazor client (Razor component) app?

I created a Blazor WebAssembly hosted template in .NET Core 3.1. Then right clicked on project.Client/wwwroot/css folder and clicked on Add client side library. Then selected the Font Awesome library and installed it. I added the below line to index.html <head>.

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

I have libman.json of:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/css/font-awesome/"
    }
  ]
}

I added just the below line to the default Blazor template page Counter.razor (Razor component). The IntelliSense finds the font:

@page "/counter"

<h1>Counter</h1>

<span class="fa fa-save"></span>

@code {}

but I only see a square:

Solution 1:^[1]

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

Solution 2:^[2]

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.

Solution 3:^[3]

You have to actually reference the stylesheet in your HTML page. This is usually done in the layout (_Layout.csthml). You need to add something like the following in your <head>:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Chris Pratt

'How to add Font Awesome to Blazor client (Razor component) app?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]