Как установить FontAwesome 5 в Angular + ASP.NET Core v2 Project Setup - PullRequest
Новая
       12

Как установить FontAwesome 5 в Angular + ASP.NET Core v2 Project Setup

0 голосов
/ 01 июня 2018

Я ищу, чтобы найти ответ о том, как FontAwesome 5 должен работать с стандартным угловым приложением ASP.NET Core v2 (код, созданный с помощью .NET Core CLI).

webpack.config.vendor.js 

const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@fortawesome/fontawesome',
    '@fortawesome/fontawesome/styles.css',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];

Я также вижу замечательное дополнение, добавленное к vendor.js и vendor.css файлам, но когда я добавляю <i class="fas fa-camera-retro"></i> в HTML, он не заменяется SVG.

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Это может или не может быть полезным, но в зависимости от того, что вы пытаетесь сделать, ваш текущий метод может быть излишним.Включение Font Awesome 5 в соответствии с документацией предназначено для использования ресурсов шрифта непосредственно в приложении node.js.Это может быть не то, что вы на самом деле ищете здесь.Если вы просто хотите, чтобы локальная копия CSS / JS ссылалась на HTML вашего веб-приложения, лучше взять из их уже скомпилированного проекта Github .

Это не пакет npm(нет package.json), так что если вы хотите использовать npm для его извлечения, вам понадобится napa .Затем просто отредактируйте файл package.json вашего приложения и добавьте / измените строку в разделе "scripts": 

"install": "napa FortAwesome/Font-Awesome"

Затем, когда вы npm install, скомпилированная версия Font Awesome будет развернута вВаш node_modules каталог.Все, что вам нужно сделать, это использовать веб-пакет или аналогичный инструмент для перемещения статических ресурсов, которые вам нужны, в wwwroot/lib или куда бы вы их не обслуживали.

0 голосов
/ 01 июня 2018

@fortawesome/fontawesome - базовый пакет.Вы должны установить как минимум еще один пакет на базовой странице.Вы можете назвать его как дополнительный пакет. 

Free Solid   ||  $ npm i -s @fortawesome/fontawesome-free-solid
Free Regular ||  $ npm i -s @fortawesome/fontawesome-free-regular
Free Brands  ||  $ npm i -s @fortawesome/fontawesome-free-brands

Например.Установите @fortawesome/fontawesome-free-solid

и добавьте его в nonTreeShakableModules.

const nonTreeShakableModules = [
     ...
    '@fortawesome/fontawesome',
    '@fortawesome/fontawesome-free-solid',
     ...
];

(я не знаю, является ли это Shakable Tree или нет. Если он затем поместит файлы в treeShakableModules)

Если вы беспокоитесь о размере сборки(да, если это не Tree Shakable), вы можете импортировать только те SVG, которые вам нужны.

Например, если вам нужно fa-camera-retro, импортируйте только @fortawesome/fontawesome-free-solid/faCameraRetro.

Ссылка: Официальный документ

...