如何将 Font Awesome 添加到 Blazor 客户端（Razor 组件）应用程序？答案

【问题标题】：How to add Font Awesome to Blazor client (Razor component) app?如何将 Font Awesome 添加到 Blazor 客户端（Razor 组件）应用程序？
【发布时间】：2020-03-30 12:37:06
【问题描述】：

我在 .NET Core 3.1 中创建了一个 Blazor WebAssembly 托管模板。然后右键单击 project.Client/wwwroot/css 文件夹并单击 Add client side library。然后选择 Font Awesome 库并安装它。我将以下行添加到 index.html <head>.

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

我有 libman.json 的：

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

我只在默认的 Blazor 模板页面 Counter.razor（Razor 组件）中添加了以下行。 IntelliSense 找到字体：

@page "/counter"

<h1>Counter</h1>

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

@code {}

但我只看到一个正方形：

【问题讨论】：

我已将这个从 w3schools 复制的脚本元素添加到 _Host.cshtml 文件 <script src="https://kit.fontawesome.com/a076d05399.js"></script> 中，它可以工作。我对这些玩具不熟悉，但我想您需要获得类似 a076d05399 的代码才能启用它。我在这里使用 w3schools 示例中的代码。我不清楚使用 wwwroot 中的文件时应该如何完成。
@Isaac 我将您的代码添加到 index.html 文件中并且可以正常工作。但正如你所说，它没有使用 wwwroot 内容。这个脚本向我指出了这种使用 fontawesome blog.fontawesome.com/introducing-font-awesome-kits 的有趣方式

标签： asp.net-core razor blazor font-awesome blazor-webassembly

【解决方案1】：

您还需要包含 JavaScript。

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

您可以将<script> 标签放在文件底部的另一个标签下方，但我怀疑您会注意到任何速度差异。

来自现已删除的评论：

JS 只是一个选项（首选选项），但 CSS only 仍然是一个选项。另外，您不要同时使用两者。要么是 CSS 要么是 JS

在 Blazor 中，我只能让 JS 版本工作。只有 CSS 不起作用（文件是 200-OK）。

【讨论】：

~/ 是由智能感知添加的。它当然不需要，但我认为它也不疼。
它不适用于 ~/ 对我来说。 VS2019 16.4 Net Core 3.1，模板来自运行命令 dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
我错过了客户端标签。 ~/ 在服务器端工作，但最好将它们排除在外。 Intellisense 也应该更新。
高亮显示的文字是正确的。我删除了 css 行，只留下脚本并以光速工作。
我正在使用 Blazor，它仅在 js 文件存在时才有效。

【解决方案2】：

fa 前缀在版本 5 中已弃用。新的默认值是 fas 实体样式和品牌的 fab 样式。 ref

添加到 _hosts.cshtml（用于服务器端）

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

使用fas如下：

@page "/counter"

<h1>Counter</h1>

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

@code {}

这是在 blazor Net5 中测试的

【讨论】：

【解决方案3】：

您可以使用 libman（或从 Fontawesome 网站上提供的 zip 手动复制文件）。然后仅将 all.min.css 和 webfonts 文件夹的全部内容安装/复制到 wwwroot/css/font-awesome 子文件夹中。像这样：

然后将其放入 Pages/_Host.cshtml（对于 Blazor Server）或 wwwroot/index.html（Blazor Web Assembly）到 head 部分：

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

或者，作为替代方案，在 site.css 的开头添加：

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

不需要 JS。它有效。

【讨论】：

我发现这是最干净的解决方案。在我的 Blazor Web Assembly 应用程序中工作就像一个魅力。
我有一个引用 FA 的简单按钮，例如 <button class="fas fa-angle-double-up">Up</button>，我只是得到一个脉动的小问号。出于某种原因，Blazor 决定它找不到任何东西。我有上面的确切链接。

【解决方案4】：

您必须在 HTML 页面中实际引用样式表。这通常在布局中完成 (_Layout.csthml)。您需要在 <head> 中添加类似以下内容：

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

【讨论】：

我在 blazor 客户端应用程序项目文件夹中找不到 _Layout.cshtml。我找到的最接近的是 MainLayout.razor。我在中添加了它，没有，都没有工作。
在 Blazor 中，您有 _Host.cshtml。不要在 _MainLayout 中放置 <head>。 _Layout用于MVC项目。
我正在使用托管的 Blazor 客户端应用程序 (wasm)。我找不到 _Host.cshtml。
wasm 是 wwwroot 上的 index.html
如果看到方括号，请将 font-awesome.min.css 切换为 all.min.css