У меня такая же проблема. Это похоже на то, что файлы игнорируются CLI и не копируются в режиме разработки. Тем не менее, файл находится в каталоге / dist, когда сборка завершена.
Thibs
Я не понимаю, почему мы должны добавлять font-awesome через npm, разве мы не могли просто связать font-awesome cdn? Чего мне не хватает?
Росди Касим
4
@RosdiKasim вы можете сделать ссылку на CDN из вашего индексного файла. Однако бывают случаи, когда вы этого не хотите. Корпоративные проекты могут не допустить внешних источников; CDN может пойти вниз; Обновлению CLI может потребоваться обновить файл index.html, поэтому вам нужно убедиться, что он не перезаписывает ваши текущие ссылки; font-awesome может быть зависимостью для другой библиотеки npm; Вы хотите заблокировать шрифт-awesome для определенной версии; процесс сборки может зависеть от него ... (и так далее, вы получите идею) В конце концов, до того , как вы хотите , чтобы привести его в.
Nik
Хорошо, спасибо ... похоже, я не сильно скучаю ... Я просто хочу убедиться, что я понимаю плюсы и минусы ... ура.
Росди Касим
См. Также официальную документацию по добавлению JS или CSS: angular.io/guide/…
Гийом
Ответы:
469
После окончательной версии Angular 2.0 структура CLI-проекта Angular2 была изменена - вам не нужны никакие файлы вендоров, ни system.js - только веб-пакет. Итак, вы делаете:
npm install font-awesome --save
В этом angular-cli.jsonфайле найдите styles[]массив и добавьте сюда каталог шрифтов-ссылок, как показано ниже:
"apps": [
{
"root": "src",
"outDir": "dist",
....
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
],
...
}
]
],
В более поздних версиях Angular используйте angular.jsonфайл без ../. Например, использовать "node_modules/font-awesome/css/font-awesome.css".
Поместите несколько значков шрифта в любой HTML-файл, который вы хотите:
Остановите приложение Ctrl+ cзатем перезапустите приложение, используя, ng serveпотому что наблюдатели предназначены только для папки src, а angular-cli.json не наблюдается для изменений.
Можете ли вы объяснить, что addonsделает? Я вижу, что это задокументировано как «Конфигурация зарезервирована для установленных сторонних дополнений». , но я не могу найти никакой обработки в коде Angular-CLI .
Арджан
1
К сожалению, @Arjan & @bjorkblom - я не смог найти никаких документов, касающихся этой области addons... Это было в моем внимании некоторое время ... Я обновлю свой ответ, как только найду что-нибудь.
Айон
3
@Rosdi Kasim Jan - вы могли бы сделать это - но в больших приложениях вы обычно не используете cdns. Во-первых, потому что кто-то может взломать их и косвенно скомпрометировать ваше приложение. Во-вторых, потому что это не просто потрясающий шрифт - вам нужны другие внешние библиотеки, такие как начальная загрузка, библиотеки dnd и т. Д. - если у вас есть отдельный запрос http - к cdn - для каждой из них это плохая производительность. Вместо этого вы загружаете с помощью npm - и упаковываете весь свой код в один файл с помощью веб-пакета или чего-то еще, минимизируйте и увеличивайте его - и именно так вы можете запускать свое приложение на мобильных устройствах - где ресурсов мало.
Это лучшее решение IMO. Работает как шарм после ng build && ng serve -w. Проще и безопаснее позволить scss создать стиль + шрифты, чем пытаться изменить angular-cli infra;)
soywod
33
Лучший ответ. Незначительное улучшение: используйте ~вместо ../node_modules/, например@import '~font-awesome/scss/font-awesome.scss';
m4js7er
5
не работает для меня с angular4 и scss. Я могу видеть css, но не икону
Aniruddha Das
У меня такая же проблема на Angular4
Франческо
2
Используйте .cssимпорт из, ~font-awesome/css/font-awesome.min.cssи он отлично работает (по умолчанию fa-font-path) для angular4 / cli
Тим
67
Верхний ответ немного устарел, и есть немного более простой способ.
Изменить: как отмечено в комментариях, строка для шрифтов должна быть изменена в более новых версиях на$fa-font-path: "../../../node_modules/font-awesome/fonts";
использование ~заставит дерзко заглянуть вnode_module . Лучше сделать это так, чем с относительным путем. Причина в том, что если вы загружаете компонент в npm и импортируете font-awesome внутри компонента scss, тогда он будет работать правильно с ~, а не с относительным путем, который будет неправильным в этой точке.
Этот метод работает для любого модуля npm, который содержит css. Это работает и для scss. Однако, если вы импортируете CSS в ваши styles.scss, он не будет работать (и, возможно, наоборот). Вот почему
По-прежнему получаю ту же ошибку после выполнения ваших шагов.
indra257
Не удалось загрузить файлы
.ttf
Я использую Cli 1.0. Просто чтобы перепроверить, я создал один пример приложения и просто загрузил удивительный шрифт и развернул приложение. все еще получаю эту ошибку.
indra257
@ indra257 Мне пришлось добавить $ fa-font-path: "../node_modules/font-awesome/fonts"; в styles.scss для приведенных выше инструкций для работы
Todilo
У меня нет проекта style.scss в моем проекте. Нужно ли выполнять какие-либо другие действия после добавления файла styles.scss.
indra257
51
Использование Font-Awesome в Angular Projects состоит из 3 частей
У вас есть какие-нибудь проблемы с комплектацией шрифтов-офигенных? Я думаю, что основной проблемой является комплектация, когда мы используем Cli. Файлы tff, woff, woff2 не упаковываются.
indra257
Я только что создал образец приложения и выполнил ваши действия. Приложение в комплекте с помощью ng build. В консоли я все еще вижу Не удалось загрузить файлы woff и woff2
indra257
1
Это правильно. Он отлично работает с NG подачи. С ng build все работает нормально, но консоль показывает, что не может загрузить некоторые файлы woff, woff2.
indra257
Я не вижу той же проблемы, поэтому я ожидаю, что что-то не так с вашими файлами сборки / конфигурации. Я предлагаю вам повторить вашу проблему с помощью контрольного примера и создать новый вопрос с ним.
баранина
Я создал пустое приложение с помощью angular-cli и добавил font-awesome. Какие файлы вы хотите, чтобы я проверил ..
При использовании варианта 1 снимите ../с"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh
ПОЧЕМУ я должен использовать новый угловой пакет? Похоже, больше PITA для импорта их по отдельности.
MDave
1
Я имею npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsв виду, что в вашем ответе не равно npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomeв документах, извинения, если я упускаю что-то очевидное.
User632716
1
@ User632716 OK только что добавил отсутствующий пакет в команду npm install.
kuncevic.dev
1
Большое спасибо ... Я искал шрифт Angular 9 +. ОБНОВЛЕНИЕ Февраль 2020 - самая полезная вещь после потери 1 дня.
Теджашри
15
С Angular2RC5 иangular-cli 1.0.0-beta.11-webpack.8 вы можете достичь этого с помощью импорта CSS.
Просто установите шрифт потрясающе:
npm install font-awesome --save
а затем импортируйте font-awesome в один из настроенных файлов стилей:
Похоже, он пытается импортировать, но получает сообщение об ошибке zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... файл на самом деле существует, но, похоже, localhost:4200не запускается из корня этой папки ... Как упаковать font-awesome в localhost:4200корневую папку ...
microchip78
также я использую angular-cli@1.0.0-beta.11-webpack.2и стиль файла конфигурации в angular-cli.jsonне работает ...
microchip78
1
хм, что странно, может быть, обновить до 1.0.0-beta.11-webpack.8?
Шуссон
13
Думал, что я добавлю свое разрешение, так как font-awesome теперь устанавливается по-разному в соответствии с их документацией.
Многие инструкции выше работают, я предлагаю посмотреть на них. Однако кое-что стоит отметить:
Использование <i class="fas fa-coffee"></i>не работало в моем проекте (новый учебный проект всего лишь недельной давности) после установки, и значок примера здесь также был скопирован в буфер обмена из Font Awesome на прошлой неделе.
Это <i class="fa fa-coffee"></i>работает . Если после установки Font Awesome в вашем проекте он еще не работает, я предлагаю проверить класс на вашем значке, чтобы удалить «s», чтобы увидеть, работает ли он тогда.
Здесь много хороших ответов. Но если вы попробовали все из них и по-прежнему получаете квадраты вместо красивых иконок, проверьте правила CSS. В моем случае у меня было следующее правило:
Огромное спасибо, что сделал это для меня, а теперь я должен выяснить, как заставить шрифты работать, поскольку выполнение этого в селекторе тела не работает для меня
jgerstle
@jgerstle, указание шрифта bodyдолжно работать, будьте уверены, что вы не переопределяете шрифт где-то еще, возможно, вы переопределяете его h*или pтеги, как мы обычно это делаем.
Коммерческое самоубийство
Да, что-то, кажется, переопределяет это, но я не думаю, что это мой собственный код, я думаю, что это может быть просто хром по умолчанию, это странно, хотя, потому что я установил это на! Важный, и он все еще кажется переопределенным. Я должен смотреть больше на это.
Jgerstle
Я понял, используя: not (.fa), чтобы сохранить тот же селектор *, но не нацеливаться на что-либо, используя font-awesome
Я получаю только квадраты для изображений, когда я делаю это.
Горгулья
то же самое здесь, как вы удалили квадраты? @Gargoyle
AngularM
4
В этом посте описывается, как интегрировать Fontawesome 5 в Angular 6 (Angular 5 и предыдущие версии также будут работать, но тогда вам придется скорректировать мои записи)
Вариант 1: Добавить CSS-файлы
Pro: каждый значок будет включен
Против: каждый значок будет включен (больший размер приложения, потому что включены все шрифты)
Против: Вы должны включить каждый значок, который вы хотите использовать отдельно
Используйте пакет FontAwesome 5 Angular:
npm install @fortawesome/angular-fontawesome
Просто следуйте их документации, чтобы добавить значки. Они используют svg-icons, поэтому вам нужно только добавить svgs / icons, которые вы действительно используете.
Обратите внимание, что ваши пути начинаются с @fortawesome. Обратите внимание на слово «FORT», а не «FONT». Моя установка тоже делает это. Кто-нибудь знает, что с этим случилось?
Хельцгейт,
Не берите в голову, очевидно, у них есть некоторое переименование структурирования. Посмотреть это сообщение на Github
Helzgate,
@Aniketkale что не работает? Я представил два варианта
Пол
3
После некоторых экспериментов мне удалось заставить работать следующее:
Редактировать: я использую Angular ^ 4.0.0 и Electron ^ 1.4.3
Если у вас есть проблемы с ElectronJS или аналогичным и у вас есть ошибка 404, возможный обходной путь - отредактировать ваш файл webpack.config.js, добавив (и предполагая, что у вас установлен модуль font-awesome node через npm или в файле package.json) :
new CopyWebpackPlugin([
{ from: 'node_modules/font-awesome/fonts', to: 'assets' },
{ from: 'src/assets', to: 'assets' }
]),
Обратите внимание, что конфигурация веб-пакета, которую я использую, имеет в src/app/distкачестве вывода, и в dist, assetsпапка создается папкой:
Итак, в основном, то, что в настоящее время происходит:
Webpack копирует папку шрифтов в папку ресурсов dev.
Webpack копирует папку ресурсов dev в папку distактивов
Теперь, когда процесс сборки будет завершен, приложению нужно будет найти .scssфайл и папку, содержащую значки, чтобы правильно их разрешить. Чтобы разрешить их, я использовал это в моей конфигурации веб-пакета:
// support for fonts
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},
Наконец, в .scssфайле, я импортировать шрифт удивительного .scss и определение пути шрифтов, которые, опять же , dist/assets/font-awesome/fonts. Путь, distпотому что в моем webpack.config output.path установлен какhelpers.root('src/app/dist');
Обратите внимание, что таким образом он определит путь к шрифту (используется позже в файле .scss) и импортирует файл .scss, используя ~font-awesomeдля определения пути font-awesome в node_modules.
Это довольно сложно, но я нашел единственный способ обойти проблему с ошибкой 404 в Electron.js
Я потратил несколько часов, пытаясь заставить последнюю версию FontAwesome 5.2.0 работать с AngularCLI 6.0.3 и Material Design. Я следовал инструкциям по установке npm с сайта FontAwesome
Их последние документы проинструктируют вас выполнить установку, используя следующее:
npm install @fortawesome/fontawesome-free
Потратив несколько часов, я наконец удалил его и установил потрясающий шрифт, используя следующую команду (это устанавливает FontAwesome v4.7.0):
Font Awesome предоставляет вам scalableвекторные иконки, которые можно мгновенно настроить - размер, цвет, тень и все, что можно сделать с помощью силы CSS.
Создайте новый проект и перейдите в проект.
ng new navaApp
cd navaApp
Установите библиотеку font-awesome и добавьте зависимость package.json.
npm install --save font-awesome
Использование CSS
Чтобы добавить иконки Font Awesome CSS в ваше приложение ...
и регулярное выражение соответствует этим svg-ссылкам (с указанием версии или без нее). В зависимости от настроек вашего веб-пакета он может вам не понадобиться или вам может понадобиться что-то еще.
Вы захотите добавить font-awesome к своим «зависимостям», а не «dev-зависимостям», как вам понадобится в финальной сборке. Также вышеприведенные инструкции не дают ответа на то, как проект Angular подберет его после добавления в файл package.json.
Ник
1
Я хотел использовать Font Awesome 5+ и большинство ответов сосредоточено на старых версиях
Для нового Font Awesome 5+ угловой проект еще не выпущен, поэтому, если вы хотите использовать примеры, упомянутые на веб-сайте со шрифтами awesome atm, вам нужно обойти это. (особенно классы fast, far вместо класса fa)
Я только что импортировал CDN в Font Awesome 5 в моем файле styles.css. Просто добавил это на тот случай, если кто-то поможет найти ответ быстрее, чем я :-)
Я попробовал это. Хорошо работает на местном, но когда я пытаюсь его собрать, пропали иконки.
Пиюш Чоудхари
1
Если по какой-то причине вы не можете установить пакет, бросьте npm. Вы всегда можете отредактировать index.html и добавить потрясающий CSS в голову. А потом просто использовал его в проекте.
Ответы:
После окончательной версии Angular 2.0 структура CLI-проекта Angular2 была изменена - вам не нужны никакие файлы вендоров, ни system.js - только веб-пакет. Итак, вы делаете:
npm install font-awesome --save
В этом
angular-cli.json
файле найдитеstyles[]
массив и добавьте сюда каталог шрифтов-ссылок, как показано ниже:Поместите несколько значков шрифта в любой HTML-файл, который вы хотите:
Остановите приложение Ctrl+ cзатем перезапустите приложение, используя,
ng serve
потому что наблюдатели предназначены только для папки src, а angular-cli.json не наблюдается для изменений.источник
addons
делает? Я вижу, что это задокументировано как «Конфигурация зарезервирована для установленных сторонних дополнений». , но я не могу найти никакой обработки в коде Angular-CLI .addons
... Это было в моем внимании некоторое время ... Я обновлю свой ответ, как только найду что-нибудь.addons
свойство больше не используется. Достаточно включитьfont-awesome.css
файл вstyles
. См github.com/angular/angular-cli/blob/master/docs/documentation/...Если вы используете SASS, вы можете просто установить его через npm
и импортировать его в ваш
/src/styles.scss
с:Совет: по возможности избегайте путаницы с
angular-cli
инфраструктурой. ;)источник
ng build && ng serve -w
. Проще и безопаснее позволить scss создать стиль + шрифты, чем пытаться изменить angular-cli infra;)~
вместо../node_modules/
, например@import '~font-awesome/scss/font-awesome.scss';
.css
импорт из,~font-awesome/css/font-awesome.min.css
и он отлично работает (по умолчанию fa-font-path) для angular4 / cliВерхний ответ немного устарел, и есть немного более простой способ.
установить через нпм
npm install font-awesome --save
в вашем
style.css
:@import '~font-awesome/css/font-awesome.css';
или в вашем
style.scss
:$fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';
Изменить: как отмечено в комментариях, строка для шрифтов должна быть изменена в более новых версиях на
$fa-font-path: "../../../node_modules/font-awesome/fonts";
использование
~
заставит дерзко заглянуть вnode_module
. Лучше сделать это так, чем с относительным путем. Причина в том, что если вы загружаете компонент в npm и импортируете font-awesome внутри компонента scss, тогда он будет работать правильно с ~, а не с относительным путем, который будет неправильным в этой точке.Этот метод работает для любого модуля npm, который содержит css. Это работает и для scss. Однако, если вы импортируете CSS в ваши styles.scss, он не будет работать (и, возможно, наоборот). Вот почему
источник
Использование Font-Awesome в Angular Projects состоит из 3 частей
Монтаж
Установите из NPM и сохраните в свой package.json
Стилизация При использовании CSS
Вставьте в свой style.css
Стилизация При использовании SCSS
Вставьте в свой style.scss
Использование с простым Angular 2.4+ 4+
Использование с угловым материалом
В вашем app.module.ts измените конструктор, чтобы использовать
MdIconRegistry
и добавить
MatIconModule
в свой@NgModule
импорт}
Теперь в любом файле шаблона вы можете теперь сделать
источник
ОБНОВЛЕНИЕ Февраль 2020: пакет
fortawesome теперь поддерживается,
ng add
но доступен только для angular 9 :ОБНОВЛЕНИЕ 8 октября 2019 года:
Вы можете использовать новый пакет https://www.npmjs.com/package/@fortawesome/angular-fontawesome
Добавить
FontAwesomeModule
к импорту вsrc/app/app.module.ts
:Свяжите значок со свойством в вашем компоненте
src/app/app.component.ts
:Используйте значок в шаблоне
src/app/app.component.html
:ОРИГИНАЛЬНЫЙ ОТВЕТ:
Опция 1:
Вы можете использовать angular-font-awesome модуль npm
Импортируйте модуль:
Если вы используете Angular CLI, добавьте потрясающий шрифт CSS к стилям внутри angular-cli.json
ПРИМЕЧАНИЕ. Если вы используете препроцессор SCSS, просто измените CSS на scss.
Пример использования:
Оптоин 2:
Есть официальная история для этого сейчас
Установите библиотеку font-awesome и добавьте зависимость к
package.json
npm install --save font-awesome
Использование CSS
Чтобы добавить иконки Font Awesome CSS в ваше приложение ...
Использование SASS
Создайте пустой файл
_variables.scss
вsrc/
.Добавьте следующее к
_variables.scss
:$fa-font-path : '../node_modules/font-awesome/fonts';
Вstyles.scss
добавьте следующее:Тест
Запустите ng serve для запуска приложения в режиме разработки и перейдите по адресу http: // localhost: 4200 .
Чтобы убедиться, что Font Awesome настроен правильно, перейдите
src/app/app.component.html
к следующему ...После сохранения этого файла вернитесь в браузер, чтобы увидеть значок Font Awesome рядом с названием приложения.
Также есть связанный вопрос. Angular CLI выводит файлы font-awesome шрифтов dist root, так как по умолчанию angular cli выводит шрифты в
dist
корень, что, кстати, совсем не проблема.источник
../
с"../node_modules/font-awesome/css/font-awesome.css"
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
в виду, что в вашем ответе не равноnpm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome
в документах, извинения, если я упускаю что-то очевидное.С
Angular2
RC5 иangular-cli 1.0.0-beta.11-webpack.8
вы можете достичь этого с помощью импорта CSS.Просто установите шрифт потрясающе:
а затем импортируйте font-awesome в один из настроенных файлов стилей:
(файлы стилей настроены в
angular-cli.json
)источник
zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found)
... файл на самом деле существует, но, похоже,localhost:4200
не запускается из корня этой папки ... Как упаковать font-awesome вlocalhost:4200
корневую папку ...angular-cli@1.0.0-beta.11-webpack.2
и стиль файла конфигурации вangular-cli.json
не работает ...1.0.0-beta.11-webpack.8
?Думал, что я добавлю свое разрешение, так как font-awesome теперь устанавливается по-разному в соответствии с их документацией.
Почему это ужасно, теперь ускользает от меня, но я подумал, что остановлюсь на самой последней версии, а не вернусь к старому удивительному шрифту.
Затем я импортировал его в мой scss
Надеюсь это поможет
источник
Многие инструкции выше работают, я предлагаю посмотреть на них. Однако кое-что стоит отметить:
Использование
<i class="fas fa-coffee"></i>
не работало в моем проекте (новый учебный проект всего лишь недельной давности) после установки, и значок примера здесь также был скопирован в буфер обмена из Font Awesome на прошлой неделе.Это
<i class="fa fa-coffee"></i>
работает . Если после установки Font Awesome в вашем проекте он еще не работает, я предлагаю проверить класс на вашем значке, чтобы удалить «s», чтобы увидеть, работает ли он тогда.источник
Здесь много хороших ответов. Но если вы попробовали все из них и по-прежнему получаете квадраты вместо красивых иконок, проверьте правила CSS. В моем случае у меня было следующее правило:
И это переопределяет потрясающие шрифты. Просто замена
*
селектора, чтобыbody
решить мою проблему:источник
body
должно работать, будьте уверены, что вы не переопределяете шрифт где-то еще, возможно, вы переопределяете егоh*
илиp
теги, как мы обычно это делаем.Для угловых 6,
Первый
npm install font-awesome --save
Добавить
node_modules/font-awesome/css/font-awesome.css
к angular.json .Не забудьте не добавлять никаких точек перед
node_modules/
.источник
В этом посте описывается, как интегрировать Fontawesome 5 в Angular 6 (Angular 5 и предыдущие версии также будут работать, но тогда вам придется скорректировать мои записи)
Вариант 1: Добавить CSS-файлы
Pro: каждый значок будет включен
Против: каждый значок будет включен (больший размер приложения, потому что включены все шрифты)
Добавьте следующий пакет:
Затем добавьте следующие строки в ваш angular.json:
Вариант 2: угловой пакет
Pro: меньший размер приложения
Против: Вы должны включить каждый значок, который вы хотите использовать отдельно
Используйте пакет FontAwesome 5 Angular:
Просто следуйте их документации, чтобы добавить значки. Они используют svg-icons, поэтому вам нужно только добавить svgs / icons, которые вы действительно используете.
источник
После некоторых экспериментов мне удалось заставить работать следующее:
Установить с помощью npm:
добавьте в файл angular-cli-build.js :
добавить в index.html
Ключ должен был включить типы файлов шрифтов в файл angular-cli-build.js
. + (CSS | css.map | OTF | СРВ | SVG | TTF | Уофф | woff2)
источник
angular-cli-build.js
в последней веткеПринятый ответ устарел.
Для угловых 9 и Fontawesome 5
Установить FontAwesome
npm install @ fortawesome / fontawesome-free - сохранить
Зарегистрируйте его на angular.json под стилями
"Node_modules/@fortawesome/fontawesome-free/css/all.min.css"
Используйте это в своем приложении
источник
Редактировать: я использую Angular ^ 4.0.0 и Electron ^ 1.4.3
Если у вас есть проблемы с ElectronJS или аналогичным и у вас есть ошибка 404, возможный обходной путь - отредактировать ваш файл
webpack.config.js
, добавив (и предполагая, что у вас установлен модуль font-awesome node через npm или в файле package.json) :Обратите внимание, что конфигурация веб-пакета, которую я использую, имеет в
src/app/dist
качестве вывода, и в dist,assets
папка создается папкой:Итак, в основном, то, что в настоящее время происходит:
dist
активовТеперь, когда процесс сборки будет завершен, приложению нужно будет найти
.scss
файл и папку, содержащую значки, чтобы правильно их разрешить. Чтобы разрешить их, я использовал это в моей конфигурации веб-пакета:Наконец, в
.scss
файле, я импортировать шрифт удивительного .scss и определение пути шрифтов, которые, опять же ,dist/assets/font-awesome/fonts
. Путь,dist
потому что в моем webpack.config output.path установлен какhelpers.root('src/app/dist');
Итак, в
app.scss
:Обратите внимание, что таким образом он определит путь к шрифту (используется позже в файле .scss) и импортирует файл .scss, используя
~font-awesome
для определения пути font-awesome вnode_modules
.Это довольно сложно, но я нашел единственный способ обойти проблему с ошибкой 404 в Electron.js
источник
Начиная с https://github.com/AngularClass/angular-starter , после тестирования множества различных комбинаций конфигурации, вот что я сделал, чтобы заставить его работать с AoT.
Как уже много раз говорилось, по моему
app.component.scss
:Затем в webpack.config.js (на самом деле webpack.commong.js в стартовом пакете):
В разделе плагинов:
В разделе правил:
источник
Я потратил несколько часов, пытаясь заставить последнюю версию FontAwesome 5.2.0 работать с AngularCLI 6.0.3 и Material Design. Я следовал инструкциям по установке npm с сайта FontAwesome
Их последние документы проинструктируют вас выполнить установку, используя следующее:
Потратив несколько часов, я наконец удалил его и установил потрясающий шрифт, используя следующую команду (это устанавливает FontAwesome v4.7.0):
Теперь он работает нормально, используя:
источник
Font Awesome предоставляет вам
scalable
векторные иконки, которые можно мгновенно настроить - размер, цвет, тень и все, что можно сделать с помощью силыCSS
.Создайте новый проект и перейдите в проект.
Установите библиотеку font-awesome и добавьте зависимость
package.json
.Использование CSS
Чтобы добавить иконки Font Awesome CSS в ваше приложение ...
Использование SASS
Создать новый проект с SASS:
Использовать с существующим проектом с
CSS
:Переименуйте
src/styles.css
вsrc/styles.scss
Change,angular.json
чтобы искатьstyles.scss
вместоcss
:Обязательно измените
styles.css
наstyles.scss
.Создайте пустой файл
_variables.scss
вsrc/
.Добавьте следующее к
_variables.scss
:В
styles.scss
добавьте следующее:источник
Вы можете использовать пакет Angular Font Awesome
а затем импортировать в ваш модуль:
и импортируем стиль в файл angular-cli:
смотрите более подробную информацию о пакете в библиотеке npm:
и затем используйте это так:
<i class="fa fa-coffee"></i>
источник
Чтобы использовать Font Awesome 5 в своем проекте Angular, вставьте приведенный ниже код в файл src / index.html.
Удачи!
источник
Для Fontawesome 5.x + самый простой способ будет следующим:
установить с помощью пакета npm:
npm install --save @fortawesome/fontawesome-free
В вашем
styles.scss
файле есть:Примечание: если у вас есть
_variables.scss
файл, то более целесообразно включить его$fa-font-path
внутри, а не вstyles.scss
файл.источник
Используя LESS (не SCSS) и Angular 2.4.0 и стандартный Webpack (не Angular CLI, у меня сработало следующее:
и (в моем app.component.less):
и, конечно, вам может понадобиться этот очевидный и очень интуитивно понятный фрагмент (в module.loaders в webpack.conf)
Загрузчик предназначен для исправления ошибок типа webpack.
и регулярное выражение соответствует этим svg-ссылкам (с указанием версии или без нее). В зависимости от настроек вашего веб-пакета он может вам не понадобиться или вам может понадобиться что-то еще.
источник
Добавьте его в ваш package.json как "devDependencies" font-awesome: "номер версии"
Перейти к командной строке введите команду npm, которую вы настроили.
источник
Я хотел использовать Font Awesome 5+ и большинство ответов сосредоточено на старых версиях
Для нового Font Awesome 5+ угловой проект еще не выпущен, поэтому, если вы хотите использовать примеры, упомянутые на веб-сайте со шрифтами awesome atm, вам нужно обойти это. (особенно классы fast, far вместо класса fa)
Я только что импортировал CDN в Font Awesome 5 в моем файле styles.css. Просто добавил это на тот случай, если кто-то поможет найти ответ быстрее, чем я :-)
Код в Style.css
источник
Если по какой-то причине вы не можете установить пакет, бросьте npm. Вы всегда можете отредактировать index.html и добавить потрясающий CSS в голову. А потом просто использовал его в проекте.
источник
Для webpack2 используйте:
вместо того
file-loader?name=/assets/fonts/[name].[ext]
источник
Для Angular 9 используется
ng
:Смотрите здесь для получения дополнительной информации
источник
Теперь есть несколько способов установить fontAwesome на Angular CLI:
Ссылка здесь: https://github.com/FortAwesome/angular-fontawesome
источник