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

Question

我在 .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 {}

但我只看到一个正方形:

Answer 1

您必须在 HTML 页面中实际引用样式表。这通常在布局中完成 (_Layout.csthml)。您需要在 <head>:

中添加如下内容

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

Answer 2

您还需要包括 JavaScript。

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

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

来自现已删除的评论：

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

在 Blazor 中，我只能使用 JS 版本。 CSS 只是没有用（文件是 200-OK）。

Answer 3

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

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

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

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

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

不需要JS。有效。

Answer 4

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 中测试的

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

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

asp.net-core

razor

blazor

font-awesome

blazor-webassembly