Как добавить шрифт в проект Angular 2 + CLI

269

Я использую Angular 2+ и Angular CLI.

Как добавить font-awesome в мой проект?

Nik
источник
У меня такая же проблема. Это похоже на то, что файлы игнорируются 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 - только веб-пакет. Итак, вы делаете:

  1. npm install font-awesome --save

  2. В этом 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".

  3. Поместите несколько значков шрифта в любой HTML-файл, который вы хотите:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
  4. Остановите приложение Ctrl+ cзатем перезапустите приложение, используя, ng serveпотому что наблюдатели предназначены только для папки src, а angular-cli.json не наблюдается для изменений.

  5. Наслаждайтесь своими потрясающими иконками
AION
источник
3
Можете ли вы объяснить, что addonsделает? Я вижу, что это задокументировано как «Конфигурация зарезервирована для установленных сторонних дополнений». , но я не могу найти никакой обработки в коде Angular-CLI .
Арджан
1
К сожалению, @Arjan & @bjorkblom - я не смог найти никаких документов, касающихся этой области addons... Это было в моем внимании некоторое время ... Я обновлю свой ответ, как только найду что-нибудь.
Айон
3
@Rosdi Kasim Jan - вы могли бы сделать это - но в больших приложениях вы обычно не используете cdns. Во-первых, потому что кто-то может взломать их и косвенно скомпрометировать ваше приложение. Во-вторых, потому что это не просто потрясающий шрифт - вам нужны другие внешние библиотеки, такие как начальная загрузка, библиотеки dnd и т. Д. - если у вас есть отдельный запрос http - к cdn - для каждой из них это плохая производительность. Вместо этого вы загружаете с помощью npm - и упаковываете весь свой код в один файл с помощью веб-пакета или чего-то еще, минимизируйте и увеличивайте его - и именно так вы можете запускать свое приложение на мобильных устройствах - где ресурсов мало.
Айон
12
Примечание: addonsсвойство больше не используется. Достаточно включить font-awesome.cssфайл в styles. См github.com/angular/angular-cli/blob/master/docs/documentation/...
0x2D9A3
2
Обновление: в Angular 6.0.0 имя файла изменено с .angular-cli.json на angular.json
Маной Неги,
123

Если вы используете SASS, вы можете просто установить его через npm

npm install font-awesome --save

и импортировать его в ваш /src/styles.scssс:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

Совет: по возможности избегайте путаницы с angular-cliинфраструктурой. ;)

FDCastel
источник
Это лучшее решение 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

Верхний ответ немного устарел, и есть немного более простой способ.

  1. установить через нпм

    npm install font-awesome --save

  2. в вашем 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, он не будет работать (и, возможно, наоборот). Вот почему

CED
источник
По-прежнему получаю ту же ошибку после выполнения ваших шагов.
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 частей

  1. Монтаж
  2. Стилизация (CSS / SCSS)
  3. Использование в Angular

Монтаж

Установите из NPM и сохраните в свой package.json

npm install --save font-awesome

Стилизация При использовании CSS

Вставьте в свой style.css

@import '~font-awesome/css/font-awesome.css';

Стилизация При использовании SCSS

Вставьте в свой style.scss

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Использование с простым Angular 2.4+ 4+

<i class="fa fa-area-chart"></i>

Использование с угловым материалом

В вашем app.module.ts измените конструктор, чтобы использовать MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

и добавить MatIconModuleв свой @NgModuleимпорт

@NgModule({
  imports: [
    MatIconModule,
    ....
  ],
  declarations: ....

}


Теперь в любом файле шаблона вы можете теперь сделать

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
muttonUp
источник
1
У вас есть какие-нибудь проблемы с комплектацией шрифтов-офигенных? Я думаю, что основной проблемой является комплектация, когда мы используем Cli. Файлы tff, woff, woff2 не упаковываются.
indra257
Я только что создал образец приложения и выполнил ваши действия. Приложение в комплекте с помощью ng build. В консоли я все еще вижу Не удалось загрузить файлы woff и woff2
indra257
1
Это правильно. Он отлично работает с NG подачи. С ng build все работает нормально, но консоль показывает, что не может загрузить некоторые файлы woff, woff2.
indra257
Я не вижу той же проблемы, поэтому я ожидаю, что что-то не так с вашими файлами сборки / конфигурации. Я предлагаю вам повторить вашу проблему с помощью контрольного примера и создать новый вопрос с ним.
баранина
Я создал пустое приложение с помощью angular-cli и добавил font-awesome. Какие файлы вы хотите, чтобы я проверил ..
indra257
26

ОБНОВЛЕНИЕ Февраль 2020: пакет
fortawesome теперь поддерживается, ng addно доступен только для angular 9 :

ng add @fortawesome/angular-fontawesome

ОБНОВЛЕНИЕ 8 октября 2019 года:

Вы можете использовать новый пакет https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Добавить FontAwesomeModuleк импорту в src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Свяжите значок со свойством в вашем компоненте src/app/app.component.ts:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

Используйте значок в шаблоне src/app/app.component.html:

<fa-icon [icon]="faCoffee"></fa-icon>

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Опция 1:

Вы можете использовать angular-font-awesome модуль npm

npm install --save font-awesome angular-font-awesome

Импортируйте модуль:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Если вы используете Angular CLI, добавьте потрясающий шрифт CSS к стилям внутри angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

ПРИМЕЧАНИЕ. Если вы используете препроцессор SCSS, просто измените CSS на scss.

Пример использования:

<fa name="cog" animation="spin"></fa>

Оптоин 2:

Есть официальная история для этого сейчас

Установите библиотеку font-awesome и добавьте зависимость к package.json

npm install --save font-awesome

Использование CSS

Чтобы добавить иконки Font Awesome CSS в ваше приложение ...

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Использование SASS

Создайте пустой файл _variables.scssв src/.

Добавьте следующее к _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; В styles.scssдобавьте следующее:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Тест

Запустите ng serve для запуска приложения в режиме разработки и перейдите по адресу http: // localhost: 4200 .

Чтобы убедиться, что Font Awesome настроен правильно, перейдите src/app/app.component.htmlк следующему ...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

После сохранения этого файла вернитесь в браузер, чтобы увидеть значок Font Awesome рядом с названием приложения.

Также есть связанный вопрос. Angular CLI выводит файлы font-awesome шрифтов dist root, так как по умолчанию angular cli выводит шрифты в distкорень, что, кстати, совсем не проблема.

kuncevic.dev
источник
При использовании варианта 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 в один из настроенных файлов стилей:

@import '../node_modules/font-awesome/css/font-awesome.css';

(файлы стилей настроены в angular-cli.json)

shusson
источник
1
Похоже, он пытается импортировать, но получает сообщение об ошибке 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 теперь устанавливается по-разному в соответствии с их документацией.

npm install --save-dev @fortawesome/fontawesome-free

Почему это ужасно, теперь ускользает от меня, но я подумал, что остановлюсь на самой последней версии, а не вернусь к старому удивительному шрифту.

Затем я импортировал его в мой scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

Надеюсь это поможет

Набель
источник
5

Многие инструкции выше работают, я предлагаю посмотреть на них. Однако кое-что стоит отметить:

Использование <i class="fas fa-coffee"></i> не работало в моем проекте (новый учебный проект всего лишь недельной давности) после установки, и значок примера здесь также был скопирован в буфер обмена из Font Awesome на прошлой неделе.

Это <i class="fa fa-coffee"></i> работает . Если после установки Font Awesome в вашем проекте он еще не работает, я предлагаю проверить класс на вашем значке, чтобы удалить «s», чтобы увидеть, работает ли он тогда.

McKenna
источник
4

Здесь много хороших ответов. Но если вы попробовали все из них и по-прежнему получаете квадраты вместо красивых иконок, проверьте правила CSS. В моем случае у меня было следующее правило:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

И это переопределяет потрясающие шрифты. Просто замена *селектора, чтобы bodyрешить мою проблему:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
Коммерческое самоубийство
источник
Огромное спасибо, что сделал это для меня, а теперь я должен выяснить, как заставить шрифты работать, поскольку выполнение этого в селекторе тела не работает для меня
jgerstle
@jgerstle, указание шрифта bodyдолжно работать, будьте уверены, что вы не переопределяете шрифт где-то еще, возможно, вы переопределяете его h*или pтеги, как мы обычно это делаем.
Коммерческое самоубийство
Да, что-то, кажется, переопределяет это, но я не думаю, что это мой собственный код, я думаю, что это может быть просто хром по умолчанию, это странно, хотя, потому что я установил это на! Важный, и он все еще кажется переопределенным. Я должен смотреть больше на это.
Jgerstle
Я понял, используя: not (.fa), чтобы сохранить тот же селектор *, но не нацеливаться на что-либо, используя font-awesome
jgerstle
4

Для угловых 6,

Первый npm install font-awesome --save

Добавить node_modules/font-awesome/css/font-awesome.cssк angular.json .

Не забудьте не добавлять никаких точек перед node_modules/.

Альф Мох
источник
2
Я получаю только квадраты для изображений, когда я делаю это.
Горгулья
то же самое здесь, как вы удалили квадраты? @Gargoyle
AngularM
4

В этом посте описывается, как интегрировать Fontawesome 5 в Angular 6 (Angular 5 и предыдущие версии также будут работать, но тогда вам придется скорректировать мои записи)

Вариант 1: Добавить CSS-файлы

Pro: каждый значок будет включен

Против: каждый значок будет включен (больший размер приложения, потому что включены все шрифты)

Добавьте следующий пакет:

npm install @fortawesome/fontawesome-free-webfonts

Затем добавьте следующие строки в ваш angular.json:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

Вариант 2: угловой пакет

Pro: меньший размер приложения

Против: Вы должны включить каждый значок, который вы хотите использовать отдельно

Используйте пакет FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Просто следуйте их документации, чтобы добавить значки. Они используют svg-icons, поэтому вам нужно только добавить svgs / icons, которые вы действительно используете.

Павел
источник
Обратите внимание, что ваши пути начинаются с @fortawesome. Обратите внимание на слово «FORT», а не «FONT». Моя установка тоже делает это. Кто-нибудь знает, что с этим случилось?
Хельцгейт,
Не берите в голову, очевидно, у них есть некоторое переименование структурирования. Посмотреть это сообщение на Github
Helzgate,
@Aniketkale что не работает? Я представил два варианта
Пол
3

После некоторых экспериментов мне удалось заставить работать следующее:

  1. Установить с помощью npm:

    npm install font-awesome --save
    
  2. добавьте в файл angular-cli-build.js :

    vendorNpmFiles : [
        font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
    ]
    
  3. добавить в index.html

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

Ключ должен был включить типы файлов шрифтов в файл angular-cli-build.js

. + (CSS | css.map | OTF | СРВ | SVG | TTF | Уофф | woff2)

Nik
источник
1
просто в голове нет angular-cli-build.jsв последней ветке
webpack
Также vendorNpmFiles не найдено в текущем коде Angular-CLI . Видя принятый ответ Алона, я думаю, что он устарел?
Арджан
1
@Arjan Да, этот ответ устарел ... это было для CLI pre webpack. Ответ Алона - принятый ответ
Ник
3

Принятый ответ устарел.

Для угловых 9 и Fontawesome 5

  1. Установить FontAwesome

    npm install @ fortawesome / fontawesome-free - сохранить

  2. Зарегистрируйте его на angular.json под стилями

    "Node_modules/@fortawesome/fontawesome-free/css/all.min.css"

  3. Используйте это в своем приложении

Рон Майкл
источник
2

Редактировать: я использую 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папка создается папкой:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

Итак, в основном, то, что в настоящее время происходит:

  • 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');

Итак, в app.scss:

$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

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

Это довольно сложно, но я нашел единственный способ обойти проблему с ошибкой 404 в Electron.js

briosheje
источник
2

Начиная с https://github.com/AngularClass/angular-starter , после тестирования множества различных комбинаций конфигурации, вот что я сделал, чтобы заставить его работать с AoT.

Как уже много раз говорилось, по моему app.component.scss:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

Затем в webpack.config.js (на самом деле webpack.commong.js в стартовом пакете):

В разделе плагинов:

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),

В разделе правил:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}
user3582315
источник
2

Я потратил несколько часов, пытаясь заставить последнюю версию FontAwesome 5.2.0 работать с AngularCLI 6.0.3 и Material Design. Я следовал инструкциям по установке npm с сайта FontAwesome

Их последние документы проинструктируют вас выполнить установку, используя следующее:

npm install @fortawesome/fontawesome-free

Потратив несколько часов, я наконец удалил его и установил потрясающий шрифт, используя следующую команду (это устанавливает FontAwesome v4.7.0):

npm install font-awesome --save

Теперь он работает нормально, используя:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>
Helzgate
источник
2

Font Awesome предоставляет вам scalableвекторные иконки, которые можно мгновенно настроить - размер, цвет, тень и все, что можно сделать с помощью силы CSS.

Создайте новый проект и перейдите в проект.

ng new navaApp
cd navaApp

Установите библиотеку font-awesome и добавьте зависимость package.json.

npm install --save font-awesome

Использование CSS

Чтобы добавить иконки Font Awesome CSS в ваше приложение ...

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

Использование SASS

Создать новый проект с SASS:

ng new cli-app --style=scss

Использовать с существующим проектом с CSS:

Переименуйте src/styles.cssв src/styles.scss Change, angular.jsonчтобы искать styles.scssвместо css:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

Обязательно измените styles.cssна styles.scss.

Создайте пустой файл _variables.scssв src/.

Добавьте следующее к _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

В styles.scssдобавьте следующее:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
Мойтаба Нава
источник
Это хороший вопрос. Это всегда был вопрос для меня
Сейед Али Махмуди
2

Вы можете использовать пакет Angular Font Awesome

Установка npm - сохранить font-awesome angular-font-awesome

а затем импортировать в ваш модуль:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

и импортируем стиль в файл angular-cli:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

смотрите более подробную информацию о пакете в библиотеке npm:

https://www.npmjs.com/package/angular-font-awesome

и затем используйте это так:

<i class="fa fa-coffee"></i>

Шмулик
источник
2

Чтобы использовать Font Awesome 5 в своем проекте Angular, вставьте приведенный ниже код в файл src / index.html.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Удачи!

Черма Рамалхо
источник
2

Для Fontawesome 5.x + самый простой способ будет следующим:

установить с помощью пакета npm: npm install --save @fortawesome/fontawesome-free

В вашем styles.scssфайле есть:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

Примечание: если у вас есть _variables.scssфайл, то более целесообразно включить его $fa-font-pathвнутри, а не в styles.scssфайл.

Имтиаз Шакил Сиддик
источник
1

Используя LESS (не SCSS) и Angular 2.4.0 и стандартный Webpack (не Angular CLI, у меня сработало следующее:

npm install --save font-awesome

и (в моем app.component.less):

@import "~font-awesome/less/font-awesome.less";

и, конечно, вам может понадобиться этот очевидный и очень интуитивно понятный фрагмент (в module.loaders в webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

Загрузчик предназначен для исправления ошибок типа webpack.

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

и регулярное выражение соответствует этим svg-ссылкам (с указанием версии или без нее). В зависимости от настроек вашего веб-пакета он может вам не понадобиться или вам может понадобиться что-то еще.

dpnmn
источник
1

Добавьте его в ваш package.json как "devDependencies" font-awesome: "номер версии"

Перейти к командной строке введите команду npm, которую вы настроили.

user1349544
источник
Вы захотите добавить font-awesome к своим «зависимостям», а не «dev-зависимостям», как вам понадобится в финальной сборке. Также вышеприведенные инструкции не дают ответа на то, как проект Angular подберет его после добавления в файл package.json.
Ник
1

Я хотел использовать Font Awesome 5+ и большинство ответов сосредоточено на старых версиях

Для нового Font Awesome 5+ угловой проект еще не выпущен, поэтому, если вы хотите использовать примеры, упомянутые на веб-сайте со шрифтами awesome atm, вам нужно обойти это. (особенно классы fast, far вместо класса fa)

Я только что импортировал CDN в Font Awesome 5 в моем файле styles.css. Просто добавил это на тот случай, если кто-то поможет найти ответ быстрее, чем я :-)

Код в Style.css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
Ферди Толенаар
источник
Я попробовал это. Хорошо работает на местном, но когда я пытаюсь его собрать, пропали иконки.
Пиюш Чоудхари
1

Если по какой-то причине вы не можете установить пакет, бросьте npm. Вы всегда можете отредактировать index.html и добавить потрясающий CSS в голову. А потом просто использовал его в проекте.

Семир Ходжич
источник
1

Для webpack2 используйте:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

вместо того file-loader?name=/assets/fonts/[name].[ext]

aristotll
источник
1

Теперь есть несколько способов установить fontAwesome на Angular CLI:

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Ссылка здесь: https://github.com/FortAwesome/angular-fontawesome

Арчил Лабадзе
источник