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

Question

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": "font-awesome@5.11.2",
      "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:

I've added this script element copied from w3schools to the _Host.cshtml file `` And it works. I'm not familiar with these toys, but I guess you need to get a code like **a076d05399** to enable it. I'm using here the code from a sample by w3schools. How it should be done when you use the files from wwwroot is not clear to me. — enet, Dec 05 '19 at 18:37
@Isaac I added your code to index.html file and worked. But as you said it is not using wwwroot content. This script pointed me to this interesting way of employing fontawesome https://blog.fontawesome.com/introducing-font-awesome-kits/ — Sorush, Dec 05 '19 at 22:17

H H · Accepted Answer · 2019-12-05T22:53:24.807

20

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

edited Dec 05 '19 at 22:53

answered Dec 05 '19 at 16:15

H H

263,252
30
330
514

The `~/` is added by intellisense. It certainly isn't needed but i don't think it hurts either. – H H Dec 05 '19 at 22:47
1

It didn't worked with ~/ for me. VS2019 16.4 Net Core 3.1, template from running command dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2 – Sorush Dec 05 '19 at 22:51
I missed the client-side tag. The ~/ works on server-side but it is altogether better to leave them out. Intellisense should be updated too. – H H Dec 05 '19 at 23:00
1

The highlighted text is correct. I removed the css line, and only left the script and worked as fast as light speed. – Sorush Dec 05 '19 at 23:07
I'm using Blazor and it only works if the js file is present. – Mese Mar 05 '20 at 14:15
CSS only works fine in Blazor 3. No need for JS. – Linus Proxy Dec 16 '21 at 14:05

M.Hassan · Answer 2 · 2021-01-12T12:58:14.763

18

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

edited Jan 12 '21 at 12:58

answered Jan 12 '21 at 12:51

M.Hassan

10,282
5
65
84

This also worked in Blazor .NET 6. – Jan Jun 06 '22 at 10:45
1

I can see some icons like `fa-save` or `fa-user` but not `fa-code-pull-request` .. does anyone know how to solve this? – samayo Dec 03 '22 at 22:45

Robert J · Answer 3 · 2020-05-01T10:00:46.993

12

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.

edited May 01 '20 at 10:00

answered May 01 '20 at 09:47

Robert J

704
10
8

I've found this to be the cleanest solution. Worked like a charm in my Blazor Web Assembly app. – Christiano Kiss Aug 19 '20 at 18:34
I have a simple button that references FA like `` and I just get an pulsing small question mark. For some reason Blazor decided it couldn't find something. I have the exact link as above. – Kevin Burton Mar 17 '21 at 17:14

score 2 · Answer 4 · answered Dec 05 '19 at 15:26

2

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

answered Dec 05 '19 at 15:26

Chris Pratt

232,153
36
385
444

1

I couldn't find _Layout.cshtml in blazor client app project folder. The closest I found was MainLayout.razor. I added to it within a and without, neither worked. – Sorush Dec 05 '19 at 22:39
In Blazor you have _Host.cshtml. Don't put a `` in _MainLayout. _Layout is used in MVC projects. – H H Dec 05 '19 at 22:43
2

I am working with Blazor client app hosted (wasm). I couldn't find _Host.cshtml. – Sorush Dec 05 '19 at 22:58
2

wasm is index.html on wwwroot – Bart Calixto Feb 20 '20 at 10:53
If you see square brackets, switch font-awesome.min.css to all.min.css – Steve Greene Apr 01 '21 at 17:10

score 0 · Answer 5 · answered Jan 11 '23 at 09:49

FontAwesome have multiple framework supported (Vue, React, Angular, WordPress, LESS, SCSS). But I don't know why they are not providing it for Blazor.

So that, I have created "Brushtail.FontAweomse.Blazor" nuget package.

Instructions https://www.nuget.org/packages/Brushtail.FontAwesome.Blazor/

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

5 Answers5

Linked