如何将 Font Awesome 添加到 Blazor 客户端（Razor 组件）应用程序？
Sor*_*ush 13 razor font-awesome asp.net-core blazor blazor-webassembly
我在 .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 {}
但我只看到一个正方形：
Hen*_*man 12
您还需要包含 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）。
M.H*_*san 11
该足协前缀已经在5版本被弃用新的默认是FAS扎实的作风和晶圆厂风格的品牌。参考
添加到 _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 中测试的
您可以使用 libman（或从 Fontawesome 网站上提供的 zip 手动复制文件）。然后只安装/复制 all.min.css 和 webfonts 文件夹的全部内容到 wwwroot/css/font-awesome 子文件夹中。像这样：
然后将其放入 Pages/_Host.cshtml（用于 Blazor 服务器）或 wwwroot/index.html（Blazor Web 程序集）的 head 部分：
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
或者，作为替代，在 site.css 的开头添加：
@import url('font-awesome/css/all.min.css');
不需要JS。有用。
| 归档时间： |
|
| 查看次数： |
13119 次 |
| 最近记录： |