10

I created a blazor webassembly hosted template dot net core 3.1. Then right clicked on project.Client/wwwroot/css folder and click on add client side library. Then selected font-awesome library in installed it. I added 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 below line to default blazor template page counter (razor component). The intelisense finds the font:

@page "/counter"

<h1>Counter</h1>

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

@code {}

but I only see a square

enter image description here

Sorush
  • 1,384
  • 3
  • 14
  • 27
  • 1
    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

4 Answers4

10

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

Henk Holterman
  • 236,989
  • 28
  • 287
  • 464
  • The `~/` is added by intellisense. It certainly isn't needed but i don't think it hurts either. – Henk Holterman 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. – Henk Holterman 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
7

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:

enter image description here

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.

Robert J
  • 439
  • 6
  • 6
  • 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
7

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

M.Hassan
  • 7,947
  • 4
  • 45
  • 67
1

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" />
Chris Pratt
  • 207,690
  • 31
  • 326
  • 382