14

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

但我只看到一个正方形：

在此处输入图像描述

4

4 回答 4

15

您还需要包含 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）。

于 2019-12-05T16:15:29.290 回答
11

fa前缀在版本 5中已被弃用。新的默认值是fas solid 样式和品牌的 fab 样式。参考

添加到 _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 中测试的

于 2021-01-12T12:51:25.070 回答
8

您可以使用 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。有用。

于 2020-05-01T09:47:21.640 回答
2

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

<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css" />
于 2019-12-05T15:26:17.573 回答