Как добавить Font Awesome в клиентское приложение Blazor (компонент Razor)?

Я создал размещенный шаблон Blazor WebAssembly в .NET Core 3.1. Затем щелкните правой кнопкой мыши папку project.Client / wwwroot / css и щелкните Добавить библиотеку на стороне клиента. Затем выбрал библиотеку Font Awesome и установил ее. Я добавил строку ниже в index.html <head>.

 <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/"
    }
  ]
}

Я добавил только одну строку ниже на страницу шаблона Blazor по умолчанию Counter.razor (компонент Razor). IntelliSense находит шрифт:

@page "/counter"

<h1>Counter</h1>

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

@code {}

но я вижу только квадрат:

введите описание изображения здесь


asp.net-core blazor blazor-webassembly razor font-awesome
person Sorush    schedule 05.12.2019    source источник
comment
Я добавил этот элемент сценария, скопированный из w3schools, в файл _Host.cshtml <script src="https://kit.fontawesome.com/a076d05399.js"></script>, и он работает. Я не знаком с этими игрушками, но полагаю, вам понадобится код типа a076d05399, чтобы включить их. Я использую здесь код из образца от w3schools. Как это делать при использовании файлов с wwwroot мне непонятно.   -  person enet    schedule 05.12.2019
comment
@Isaac Я добавил ваш код в файл index.html и работал. Но, как вы сказали, он не использует содержимое wwwroot. Этот скрипт указал мне на этот интересный способ использования fontawesome blog.fontawesome.com/introduction- font-awesome-kits   -  person Sorush    schedule 06.12.2019

Ответы (4)


arrow_upward
12
arrow_downward

Вам также необходимо включить 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 также остается вариантом. Кроме того, вы не используете оба. Это либо CSS, либо JS

В Blazor я мог заставить работать только версию JS. Только CSS не работал (файл был 200-OK).

person Henk Holterman    schedule 05.12.2019
comment
~/ добавлен intellisense. Конечно, в этом нет необходимости, но я не думаю, что это больно. - person Henk Holterman; 06.12.2019
comment
У меня это не сработало с ~ /. VS2019 16.4 Net Core 3.1, шаблон из запущенной команды dotnet new -i Microsoft.AspNetCore.Blazor.Templates :: 3.1.0-preview4.19579.2 - person Sorush; 06.12.2019
comment
Я пропустил клиентский тег. ~ / Работает на стороне сервера, но лучше не использовать их. Следует обновить и Intellisense. - person Henk Holterman; 06.12.2019
comment
Выделенный текст правильный. Я удалил строку css, оставил только скрипт и работал со скоростью света. - person Sorush; 06.12.2019
comment
Я использую Blazor, и он работает только при наличии файла js. - person Mese; 05.03.2020

arrow_upward
9
arrow_downward

Префикс 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

person M.Hassan    schedule 12.01.2021

arrow_upward
7
arrow_downward

Вы можете использовать libman (или скопировать файлы вручную из zip-архива, доступного на сайте Fontawesome). Затем установите / скопируйте только all.min.css и все содержимое папки webfonts в подпапку wwwroot / css / font-awesome. Нравится:

введите описание изображения здесь

Затем поместите это в Pages / _Host.cshtml (для сервера Blazor) или wwwroot / index.html (веб-сборка Blazor) в раздел head:

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

Или, в качестве альтернативы, добавьте это в начало site.css:

@import url('font-awesome/css/all.min.css');

Нет необходимости в JS. Оно работает.

person Robert J    schedule 01.05.2020
comment
Я считаю, что это самое чистое решение. Отлично поработал в моем приложении Blazor Web Assembly. - person Christiano Kiss; 19.08.2020
comment
У меня есть простая кнопка, которая ссылается на FA, например <button class="fas fa-angle-double-up">Up</button>, и я просто получаю пульсирующий маленький вопросительный знак. По какой-то причине Blazor решил, что ничего не может найти. У меня есть точная ссылка, как указано выше. - person Kevin Burton; 17.03.2021

arrow_upward
1
arrow_downward

Вы должны действительно сослаться на таблицу стилей на своей HTML-странице. Обычно это делается в макете (_Layout.csthml). Вам нужно добавить в свой <head> что-то вроде следующего:

<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css" />
person Chris Pratt    schedule 05.12.2019
comment
Мне не удалось найти _Layout.cshtml в папке проекта клиентского приложения Blazor. Ближайшим, что я нашел, был MainLayout.razor. Я добавил к нему в ‹head› и без, ни один не работал. - person Sorush; 06.12.2019
comment
В Blazor у вас есть _Host.cshtml. Не помещайте <head> в _MainLayout. _Layout используется в проектах MVC. - person Henk Holterman; 06.12.2019
comment
Я работаю с клиентским приложением Blazor, размещенным (wasm). Я не смог найти _Host.cshtml. - person Sorush; 06.12.2019
comment
wasm - это index.html на wwwroot - person Bart Calixto; 20.02.2020
comment
Если вы видите квадратные скобки, замените font-awesome.min.css на all.min.css. - person Steve Greene; 01.04.2021