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

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

После окончательной версии 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. Наслаждайтесь своими потрясающими иконками

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

Использование 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>

ОБНОВЛЕНИЕ Февраль 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корень, что, кстати, совсем не проблема.

С 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)

Думал, что я добавлю свое разрешение, так как 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";

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

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

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

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

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

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

И это переопределяет потрясающие шрифты. Просто замена *селектора, чтобы 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к angular.json .

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

В этом посте описывается, как интегрировать 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, которые вы действительно используете.

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

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)

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

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

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

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

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

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

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папка создается папкой:

// 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

Начиная с 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]'
}

Я потратил несколько часов, пытаясь заставить последнюю версию 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>

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

Вы можете использовать пакет 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>

Чтобы использовать 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">

Удачи!

Для 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файл.

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

Добавьте его в ваш 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

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

Если по какой-то причине вы не можете установить пакет, бросьте npm. Вы всегда можете отредактировать index.html и добавить потрясающий 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]

Для Angular 9 используется ng:

ng add @fortawesome/angular-fontawesome@0.6.x

Смотрите здесь для получения дополнительной информации

Теперь есть несколько способов установить 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