it-swarm.com.ru

Как установить удивительный шрифт в Visual Studio 2017 с использованием ASP.NET Core v2

Я создаю веб-страницу с использованием ASP.NET Core v2 и хотел бы использовать font-awesome. 

Сначала позвольте мне сказать, что я попробовал несколько вещей. как установка Bower из NPM, установка font-awesome из NPM, установка font-awesome из пакетов Bower в VS, но, похоже, ничего не работает. 

может кто-нибудь, пожалуйста, предоставьте правильный способ установки font-awesome (желательно без использования большого количества консольных команд или ручного копирования файлов).

Вот как в настоящее время выглядят мои иждивенцы

enter image description here

enter image description here

enter image description here enter image description here

2
Thomas Adrian

Я использую ASP.NET Core 2.0.8 в Windows 10, и мне просто не хватает FA для моего проекта. Я смог добавить его в NPM, добавив его в package.json (как уже упоминали другие) под зависимостями, например так:

    {
      "version": "1.0.0",
      "name": "asp.net",
      "private": true,
      "devDependencies": {},
      "dependencies": {
        "bootstrap": "^4.1.1",
        "font-awesome": "4.7.0",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.3"
      }
    }

К сожалению, хотя он восстановил пакет, он не развернул файлы CSS там, где я ожидал, чтобы я мог ссылаться на них. Я не верю, что следующее - это что-то вроде «правильного» способа сделать это (все еще учиться!), Однако, это сработало для меня.

В обозревателе решений:

  • Перейдите к Зависимости > npm
  • Щелкните правой кнопкой мыши font-awesome > Открыть в проводнике
  • Зайдите в папку css
  • Скопируйте файлы .css
  • Вернуться в Visual Studio , в Solution Explorer , перейти к wwwroot
  • Щелкните правой кнопкой мыши css > Открыть в проводнике
  • Вставить в файлы

Теперь вы можете перетащить их в свой проект, чтобы сделать на них ссылки, и начать использовать Font Awesome, например так:

_Layout.cshtml:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] websiteTitle</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
            <link href="~/css/font-awesome.css" rel="stylesheet" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css"
                asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment>
    </head>

Надеюсь, что это поможет кому-нибудь зайти, как я.

4
Paul Maxwell

Bower уходит. NuGet теперь сфокусирован на пакетах .NET, поэтому лучше всего получать font-awesome через NPM.

1. Скачать NPM

Убедитесь, что у вас установлена ​​последняя версия nodejs. Перейдите к https://nodejs.org/en/ и загрузите версию LTS.

Чтобы проверить версию node, а также npm, установленную на вашем компьютере:

  1. Щелкните правой кнопкой мыши ваш проект в Visual Studio
  2. Выберите «Открыть командную строку»
  3. Выберите «По умолчанию (Cmd)» (или любую другую командную строку, которую вы хотите использовать)
  4. Запустите команду node -v и npm -v

 enter image description here

2. Добавить package.json

Вам нужен файл конфигурации npm для вашего проекта. Этот файл конфигурации перечисляет все ваши пакеты и используется npm для восстановления пакетов, когда это необходимо.

Чтобы добавить файл конфигурации npm:

  1. Щелкните правой кнопкой мыши ваш проект в визуальной студии
  2. Выберите «Добавить» -> «Новый элемент»
  3. Выберите «ASP.NET Core» слева и найдите «npm» в строке поиска в правом верхнем углу.
  4. Хит "Добавить"

 enter image description here

3. Установите font-awesome (и другие)

Откройте package.json и под devDependencies, просто набрав "font-awesome":, он автоматически выдаст вам список доступных версий, которые вы можете выбрать. Выберите версию, которая вам нравится.

Сохраняя этот файл package.json, npm загрузит перечисленные библиотеки в скрытую папку node_modules вашего проекта.

 enter image description here

4. Скопируйте файлы в wwwroot

В приложениях ASP.NET Core MVC, если вы хотите использовать статическое содержимое, такое как стили и файлы javascript, помимо включения app.UseStaticFiles(); в Startup.cs, вам также необходимо скопировать файлы в папку wwwroot. По умолчанию содержимое, например, в node_modules, не может использоваться вашим приложением.

Конечно, вы можете вручную скопировать нужные файлы в папку wwwroot. Но тогда вам придется заменять файлы всякий раз, когда выходят новые версии.

Чтобы правильно скопировать файлы, нам нужно использовать сторонние инструменты! 

BundlerMinifier это отличный инструмент, который вы можете использовать для объединения файлов, которые вы хотите, и выводить их в каталоги, которые вы хотите. Он использует аналогичный файл конфигурации с именем bundleconfig.json:

 enter image description here

Но этот инструмент плохо работает с типами файлов, отличными от .css и .js. Существует также проблема относительного URL для папки font-awesome fonts, потому что стиль font-awesome использует url(); (настройка "adjustRelativePaths": false не всегда работает).

5. Создавайте задания Gulp

Чтобы правильно переместить удивительные шрифты файлы и шрифты в папку wwwroot, я могу использовать gulp для настройки задач, которые можно запускать до сборки, после сборки и т. Д .:

5.1. Установите gulprimraf, команду unix rm -rf)

Перейдите к package.json и введите gup и rimraf в списке зависимостей. Сохраните файл.

 enter image description here

5.2. Добавьте gulpfile.js в ваш проект и определите задачи

Мне нужно создать задачу для перемещения font-awesome в папку wwwroot/libs и создать другую задачу для очистки в обратном порядке. Я пропустил другие задачи, не относящиеся к font-awesome.

 enter image description here

5.3 Выполнить задачи

После настройки gulpfile.js вы сможете увидеть задачи, перечисленные в «Проводнике задач». Если у вас нет этого окна в Visual Studio, перейдите в «Вид» -> «Другие окна».

 enter image description here

Вы можете вручную запустить любую задачу, щелкнув ее правой кнопкой мыши и нажав «Выполнить». Или вы можете запустить его автоматически, когда перед сборкой, после сборки, очистки или открытия проекта.

После настройки привязок к gulpfile.js будет добавлен заголовок:

 enter image description here

Теперь сохраните файл gulpfile.js и постройте свой проект. Ваши потрясающие шрифты файлы и шрифты должны быть автоматически перемещены в wwwroot и готовы к использованию.

 enter image description here

1
David Liang

Я бы порекомендовал использовать LibMan для этого ( Краткая документация по его использованию ).

Я написал это вручную, держу пари, что вы можете добавить его через «Добавить -> Клиентская библиотека». Вот мой libman.json 

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
    "libraries": [
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/font-awesome",
            "files": [
                "css/font-awesome.min.css",
                "fonts/fontawesome-webfont.eot",
                "fonts/fontawesome-webfont.svg",
                "fonts/fontawesome-webfont.ttf",
                "fonts/fontawesome-webfont.woff",
                "fonts/fontawesome-webfont.woff2",
                "fonts/FontAwesome.otf"
            ]
        }
    ]
}
1
Aleksej Vasinov

По рекомендации Microsoft

Рекомендуемый способ установки клиентских зависимостей, таких как Bootstrap в ASP.NET Core работает через Bower (с использованием bower.json)

Откройте файл bower.json и добавьте font-awesome к зависимостям

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "Font-Awesome": "4.3.0"
  }
}

Откройте файл .bowerrc в разделе bower.json, для свойства directory установлено значение wwwroot/lib, которое указывает местоположение, в котором Bower будет устанавливать ресурсы пакета.

{
 "directory": "wwwroot/lib"
}

Теперь вы можете ссылаться на font-awesome, как показано ниже

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

Самый простой способ начать работу с Font Awesome - добавить ссылку на него, используя его общедоступную сеть доставки контента (CDN):

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Больше подробностей:
https://docs.Microsoft.com/en-us/aspnet/core/client-side/bower

0
Wael Abbas

Это для .NET Core 2 после того, как вы создадите SPA-проект, используя dotnet new angular:

Перейдите в корень проекта и установите пакет: npm install font-awesome --save. Теперь вы должны увидеть это в package.json зависимости.

После этого перейдите в webpack.config.vendor.js и добавьте шрифт awesome в массив в модулях, не относящихся к дереву:

const nonTreeShakableModules = ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'es6-обещание', 'es6-shim', 'event-source-polyfill', 'font-awesome/css/font-awesome .css ',' jquery ',];

Теперь нам нужно сообщить веб-пакету, что мы добавили этот новый пакет. Так что, если вы не сделали этого до установки этого в корневой каталог проекта с помощью npm install --save-dev npm-install-webpack-plugin.

Наконец, запустите эту команду в корне проекта: webpack --config webpack.config.vendor.js

0
Aftab Lala

Перейти к package.json

добавьте следующий тег "font-awesome": "^ 4.7.0" in зависимости section

Например: - 

  {
  "name": "imsy-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular2-moment": "^1.9.0",
    "core-js": "^2.4.1",
    "ng2-toasty": "^4.0.3",
    "ng5-breadcrumb": "0.0.6",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20",
    "font-awesome": "^4.7.0"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "TypeScript": "~2.5.3"
  }
}
0
MAFAIZ