web-dev-qa-db-ja.com

素晴らしいフォントをBlazorクライアント（カミソリコンポーネント）アプリに追加する方法

Blazor WebAssemblyがホストするテンプレートドットネットコア3.1を作成しました。次に、project.Client/wwwroot/cssフォルダーを右クリックして、クライアント側ライブラリーの追加をクリックします。次に、選択したfont-awesomeライブラリをインストールします。以下の行をindex.htmlヘッドに追加しました。

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

私はのlibman.jsonを持っています

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

デフォルトのブレザーテンプレートページカウンター（カミソリコンポーネント）の行のすぐ下に追加しました。 intelisenseはフォントを見つけます：

@page "/counter"

<h1>Counter</h1>

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

@code {}

正方形しか見えない

enter image description here

asp.net-corerazorblazorblazor-client-side
4
Sorush

また、JavaScriptを含める必要があります。

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

<script>タグはファイルの下部にある他のタグの下にありますが、速度の違いに気付くことはないでしょう。

削除されたコメントから：

JSは1つのオプション（推奨オプション）にすぎませんが、CSSのみもオプションです。また、両方を使用することはできません。 CSSまたはJSです

Blazorでは、JSバージョンを機能させることしかできませんでした。 CSSは機能しませんでした（ファイルは200-OKでした）。

2
Henk Holterman

HTMLページで実際にスタイルシートを参照する必要があります。これは通常、レイアウト（_Layout.csthml）で行われます。 <head>に次のようなものを追加する必要があります。

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