Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

enter image description here

like image 249
Sorush Avatar asked Dec 05 '19 14:12

Sorush


1 Answers

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

like image 87
Henk Holterman Avatar answered Sep 17 '22 14:09

Henk Holterman