Question

我创建了一个由blazor webassembly托管的模板点网核心3.1。然后右键单击project.Client / wwwroot / css文件夹，然后单击添加客户端库。然后选择安装它的字体真棒库。我将以下行添加到index.html头。

 <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模板页面计数器（剃刀组件）。智能会找到字体：

@page "/counter"

<h1>Counter</h1>

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

@code {}

但我只能看到一个正方形

Answer 1

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

Answer 2

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

然后将其放到Pages / _Host.cshtml（用于Blazor服务器）或wwwroot / index.html（Blazor Web程序集）的头部：

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

或者，也可以将其添加到site.css的开头：

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

不需要JS。可以。

Answer 3

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

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

Answer 4

您还需要包含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还是一个选项。另外，您不能同时使用两者。是CSS还是JS

在Blazor中，我只能使用JS版本。 CSS仅不起作用（文件为200-OK）。

如何为Blazor客户端（剃刀组件）应用添加真棒字体？

4 个答案: