Как добавить шрифт Awesome к моему проекту Aurelia с использованием npm

Install Font Awesome 5 with NPM

I am working with Angular(6) application, and I am trying to use FA icons, and drop-down with no luck. I am successfully using FA(4) icons, like:

But <i ></i> is not working. I am using following command to install FA:

This is from package.json in node_modules folder:

I can see font-awesome.css , but it says Font Awesome 4.7.0 as shown below:

In angular.json file, I referenced FA: «node_modules/font-awesome/css/font-awesome.min.css»,

What do I need to do else?

5 Answers 5

For version 5, you need following package @fortawesome/fontawesome . See installation using package managers.

Using npm:

Then reference either the all.css or all.js in the <head> .

Note: Make sure the path is right, depends on where you installed the package from.

OR you can import the module in your js code.

OR if you are using Sass, you can import the module in app.scss .

Note: Replace <type> with solid , brands or regular whatever type of icons you need.

Font Awesome has an official Angular component.

Note: Replace <type> with solid , brands or regular whatever type of icons you need.

Источник

Как добавить шрифт Awesome к моему проекту Aurelia с использованием npm?

Не добавляйте шрифтовые awesome ресурсы в aurelia.json — вам также нужны файлы шрифтов, которые Aurelia не обрабатывает. Вместо этого выполните следующие шаги.

Во-первых, если вы добавили что-либо еще для шрифта в ваш prepare-font-awesome.js файл, удалите его снова.

Добавьте новый файл aurelia_project asks в папку aurelia.json и вставьте код ниже. Он копирует файлы с большим количеством шрифтов в папку вывода (в виде сконфигурированного aurelia.json файла конфигурации, например scripts ):

Откройте build.js файл в aurelia_project asks папке и вставьте следующие две строки; это будет импортировать новую функцию и выполнить ее:

Наконец, в <head> разделе вашего index.html файла просто добавьте следующую строку:

Это все; теперь вы можете использовать шрифтовые значки в любых модулях View Aurelia (html-файлы).

Обратите внимание, что это работает для любой сложной сторонней библиотеки, для которой требуются ресурсы, которые вы должны вручную включить.

Простой метод настроек по умолчанию

Вот 4 простых шага, которые я использую для приведения Font-Awesome к проекту Aurelia, который использует CLI.

1) npm install font-awesome —save

2) добавить copyFiles для сборки aurelia.json

3) добавить связывание в массив зависимостей aurelia.json

4) включить импорт для файла css (моя жизнь в app.html)

альтернатива

Указание настраиваемого местоположения шрифта

Поскольку я служил в своих файлах из другого места, мне нужно было настроить параметры расположения шрифтов. Таким образом, ниже приведены шаги, которые необходимо выполнить, если вам нужно сделать то же самое и указать, где хранятся шрифты. Я использую .less

1, 2) Как указано выше.

3) Вместо того, чтобы добавлять к набору, вам нужно ссылаться на шрифт — удивительный меньше файлов в вашем собственном меньше файла (мой называется site.less), а затем установите его @fa-font-path в свое пользовательское местоположение.

4) Нет такого метода, если у вас уже есть собственный скомпилированный эквивалентный site.css файл (с импортом), вам не нужно ничего добавлять.

На самом деле не отвечающий на вопрос о том, как интегрировать Font Awesome в ваше приложение с помощью NPM , но есть альтернативный, чистый способ получить его в вашем приложении: используя CDN.

Как упоминалось в других ответах, Aurlia в настоящее время не поддерживает связывание ресурсов, отличных от js, css и html из-за-коробки, используя CLI. Там много дискуссий по этому вопросу, и есть несколько, в основном хакерских, обходных решений, как некоторые из них предлагаются здесь.

Кроме этого: Установка гбо москва скидки

Роб Эйзенберг говорит, что планирует его правильно интегрировать в CLI Aurelia, но он считает это низким приоритетом, потому что есть простой способ обхода проблемы. Процитировать его:

Конечно, есть интерес к решению этой проблемы. Однако это более низкий приоритет, чем другие вещи в списке для CLI, отчасти потому, что простой тег ссылки исправит проблему и намного проще, чем работа, которую мы должны были бы сделать, чтобы решить эту проблему в CLI.

Источник: https://github.com/aurelia/cli/issues/248#issuecomment-254254995

Получите уникальную ссылку CDN, которую вы можете отправить здесь: http://fontawesome.io/get-started/
Включите эту ссылку в заголовке вашего индексного html-файла
Не забудьте удалить все, что вы, возможно, уже добавили, чтобы попытаться заставить его работать: пакет npm (и его ссылка в вашем пакете.json), ссылка в вашем файле aurelia.json, любые пользовательские задачи, которые вы, возможно, создали, любые <require> теги, .

Забавно, что я пытался этим утром работать то же самое. Это все, что я должен был сделать в своих зависимостях aurelia.json, чтобы он работал:

Тогда в моем html я имел:

теперь импортируется css / fonts automagicly.

РЕДАКТИРОВАТЬ

Я понял / прочитал комментарии, это не копирует файлы шрифтов. Вот обновленный скрипт сборки (es6), который скопирует все ресурсы и добавит папку в git ignore. Если вы хотите, чтобы версия для машинописного текста проверялась здесь
https://github.com/aurelia/cli/issues/248#issuecomment-253837412

./aurelia_project/tasks/build.js

Ответов: 8

Во-первых, если вы добавили что-либо еще для шрифта в ваш prepare-font-awesome.js файл, удалите его снова.

Наконец, в <head> разделе вашего index.html файла просто добавьте следующую строку:

Это все; теперь вы можете использовать шрифтовые значки в любых модулях View Aurelia (html-файлы).

Простой метод настроек по умолчанию

Вот 4 простых шага, которые я использую для приведения Font-Awesome к проекту Aurelia, который использует CLI.

1) npm install font-awesome —save

2) добавить copyFiles для сборки aurelia.json

3) добавить связывание в массив зависимостей aurelia.json

4) включить импорт для файла css (моя жизнь в app.html)

альтернатива

Указание настраиваемого местоположения шрифта

1, 2) Как указано выше.

Кроме этого: Шторка для ванны BAS Ямайка 1800 1450

Источник

FontAwesome npm Installation And Basic Usage

UDPATE: Refer to the new guide.

The article focus on FontAwesome application using npm .

Installation

Install fontawesome free packages.

To install fontawesome pro , download the latest release (I am using fontawesome-5.0.0-beta7-linux fontawesome-5.0.0-rc5-linux fontawesome-pro-5.0.4 ). Extract it to a permanent directory, goto packages advanced-options/use-with-node-js directory and execute npm link to the packages.

Go to project directory to install the packages using npm link <PACKAGE_NAME> .

If ESLint complaint of import/no-extraneous-dependencies, edit package.json to add the following. Version number can be found at fontawesome-5.0.0-rc5-linux/advanced-options/use-with-node-js/fontawesome-pro-solid/package.json .

Usage

The sample below load a icon and replace a HTML element with a SVG icon.

You can also load icon by string.

Load icon by string using prefix fa or omission of prefix doesn’t work at the moment, unless you apply a hack to the libraries ( v0.0.14 ).

NOTE: Since v1.1.2 / fontawesome-pro-5.0.4 , no hack is required.

Automatic SVG Replacement (Javacript)

Assuming you want to replace all fa-* classes with svg icon, it’s quite easily done using javascript .

Automatic SVG Replacement (npm)

To replace all fa-* classes with svg icon using npm is a bit tricky and require a hack as well ( v0.0.14 ).

Источник

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

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

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

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

В настоящее время мои депедации

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

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

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

Зависимости

npm

мыши font-awesome

Открыть в Проводнике

css

Visual Studio

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

wwwroot

мыши css

Открыть в Проводнике

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

Кроме этого: Как выстовить вмт на фиат альбеа

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

Bower уходит. Теперь NuGet сосредоточится на пакетах.NET, поэтому ваш лучший выбор, чтобы получить font-awesome осуществляется через NPM .

1.Загрузить NPM

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

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

Щелкните правой кнопкой мыши ваш проект в Visual Studio Выберите «Open Command Line» Выберите «Default (Cmd)» (или любую командную строку, которую вы хотите использовать) Запустить командный node -v и npm -v

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Создание задач Gulp

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

5.1. Установите gulp (и rimraf , команда Unix rm -rf )

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

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

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

5.3 Запуск задач

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

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

Источник

РубрикаУстановка