如何为Blazor客户端(剃刀组件)应用添加真棒字体? [英] How to add font awesome to Blazor client (razor component) app?

问题描述

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

I created a blazor webassembly hosted template dot net core 3.1. Then right clicked on project.Client/wwwroot/css folder and click on add client side library. Then selected font-awesome library in installed it. I added below line to index.html head.

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

我有

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "font-awesome@5.11.2",
      "destination": "wwwroot/css/font-awesome/"
    }
  ]
}

我在默认的blazor模板页面计数器(剃刀组件)的下面添加了一行.智能感知会找到字体:

I added just below line to default blazor template page counter (razor component). The intelisense finds the font:

@page "/counter"

<h1>Counter</h1>

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

@code {}

但我只能看到一个正方形

but I only see a square

推荐答案

您还需要包含JavaScript.

You also need to include the JavaScript.

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

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

You can put the <script> tag below the other one at the bottom of the file but I doubt that you'll notice any speed difference.

从已删除的评论中:

JS只是一个选项(首选选项)，但是CSS也仍然是一个选项.另外，您不能同时使用两者.是CSS还是JS

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).

In Blazor I could only get the JS version to work. CSS only didn't work (the file was 200-OK).

这篇关于如何为Blazor客户端(剃刀组件)应用添加真棒字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！