如何将 Font Awesome 添加到 Blazor 客户端（Razor 组件）应用程序？
Posted
技术标签:
【中文标题】如何将 Font Awesome 添加到 Blazor 客户端（Razor 组件）应用程序？【英文标题】：How to add Font Awesome to Blazor client (Razor component) app? 【发布时间】：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 的有趣方式
【参考方案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以上是关于如何将 Font Awesome 添加到 Blazor 客户端（Razor 组件）应用程序？的主要内容，如果未能解决你的问题，请参考以下文章
尝试将 Font-Awesome 图标添加到我的导航栏中的选项卡
如何在 SwiftUI 中使用 Font Awesome 作为自定义字体？
将 Solid and Light Font Awesome Pro 添加到 React 站点
可以将自定义图标添加到 font-awesome-react