если вы используете 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 инфраструктуры. ;)

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

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

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

   Edit: как отмечено в комментариях, строка для шрифтов должна быть изменена на более новые версии на $fa-font-path: "../../../node_modules/font-awesome/fonts";

С помощью ~ будет заставьте Сасс заглянуть в node_module. Лучше сделать это таким образом, чем с относительным путем. Причина в том, что если вы загружаете компонент на npm и импортируете font-awesome внутри компонента scss, он будет работать правильно с~, а не с относительным путем, который будет неправильным в этот момент.

этот метод работает для любого модуля npm, содержащего css. Он также работает для scss. если вы импортируете css в свои стили.scss это не сработает (и, возможно, вице наоборот.) вот почему

есть 3 части для использования шрифта-Awesome в угловых проектах

1. установка
2. стиль (CSS / SCSS)
3. использование в Angular

установка

установить из NPM и сохранить в пакет.в JSON

npm install --save font-awesome

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

вставить в код стиль.в CSS

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

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

вставить в свой стиль.scss

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

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

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

использование Угловое Материал

в вашем приложении.модуль.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>

С Angular2 проект RC5 и angular-cli 1.0.0-beta.11-webpack.8 вы можете достичь этого с помощью импорта css.

просто установите шрифт awesome:

npm install font-awesome --save

а затем импортируйте шрифт-awesome в один из ваших настроенных файлов стилей:

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

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

Вариант 1:

можно использовать угловое-шрифт-удивительный модуль npm

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

импорт модуля:

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

если вы используете Angular CLI, добавьте шрифт-awesome 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

чтобы добавить шрифт удивительные иконки 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';

тест

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

чтобы проверить шрифт Awesome был настроен правильно, измените src/app / app.деталь.html к следующему...

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

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

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

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

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

   npm install font-awesome --save
   

2. добавить угловая-cli-сборка.js:

   vendorNpmFiles : [
       font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
   ]
   

3. добавить .HTML-код

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

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

.+(css / css.map|otf|eot|svg|ttf|woff / woff2)

Edit: я использую angular ^4.0.0 и Electron ^1.4.3

если у вас есть проблемы с ElectronJS или аналогичный и имеют своего рода ошибку 404, возможным обходным путем является uedit ваш webpack.config.js, добавив (и предположив, что у вас есть модуль узла font-awesome, установленный через npm или в пакете.JSON-файл):

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

обратите внимание, что конфигурация webpack, которую я использую, имеет src/app/dist как выход, и, в dist,assets папка создается webpack:

// 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 копирует папку fonts в папку dev assets.
• Webpack копирует папку dev assets в dist папку assets

теперь, когда процесс сборки будет завершен, приложение должно будет искать .scss файл и папка, содержащая значки, разрешая их должным образом. Чтобы разрешить их, я использовал это в своем webpack config:

// 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.настройте выходные данные.путь задается как 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 чтобы решить шрифт-удивительный путь в node_modules.

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

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

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

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

затем в webpack.конфиг.js (на самом деле webpack.всех.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]'
}

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

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

и он переопределяет шрифтов fontawesome. Просто замена * селектор body решить мою проблему:

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

Угловое 6,

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

добавить node_modules/font-awesome/css/font-awesome.css to угловое.в JSON.

помните не добавить любые точки перед node_modules/.

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

Вариант 1: добавьте css-файлы

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

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

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

npm install @fortawesome/fontawesome-free-webfonts

потом добавить следующие линии к вашему угловому.в 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: меньший размер приложения

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

используйте FontAwesome 5 угловой пакет:

npm install @fortawesome/angular-fontawesome

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

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

npm install --save font-awesome

и (в мое приложение.деталь.меньше):

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

и, конечно, вам может понадобиться этот очевидный и интуитивно понятный фрагмент (в модуле.погрузчики в 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-ссылкам (с версией или без нее спецификация.) В зависимости от настройки webpack вам может не понадобиться или вам может понадобиться что-то еще.

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

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

Я только что импортировал cdn для шрифта Awesome 5 в моих стилях.стиль CSS. Просто добавил Это в случае, если это поможет кому-то найти ответ быстрее, чем Я сделал :-)

код в стиле.в CSS

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

Если по какой-то причине вы не можете установить пакет throw npm. Вы всегда можете редактировать индекс.html и добавить шрифт awesome CSS в голову. А потом просто использовал его в проекте.

для 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]

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

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

npm install @fortawesome/fontawesome-free

после потери нескольких часов я, наконец, удалил его и установил шрифт awesome, используя следующую команду (это устанавливает 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>

добавьте его в свой пакет.json as "в разделе devDependencies" font-awesome:"номер версии"

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