Я використовую Angular 2+ та Angular CLI.

Як додати чудовий шрифт до свого проекту?

Після остаточного випуску Angular 2.0 структура проекту Angular2 CLI була змінена - вам не потрібні файли-постачальники, не 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

   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, а ви імпортуєте шрифт-awesome всередині компонента scss, він буде працювати належним чином з ~, а не з відносним шляхом, який буде неправильним у цій точці.

Цей метод працює для будь-якого модуля npm, що містить css. Він працює і для scss. Однак якщо ви імпортуєте css у ваш styles.scss, він не працюватиме (а може бути і навпаки). Ось чому

Існує 3 частини для використання Font-Awesome в кутових проектах

1. Установка
2. Стайлінг (CSS / SCSS)
3. Використання в кутових

Установка

Встановіть з NPM та збережіть у своєму пакет.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';

Використання із звичайним кутовим 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:
тепер пакет підтримує формат,ng add але він доступний лише для кутових 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:

Ви можете використовувати кутовий модуль npm -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-дивовижний CSS до стилів всередині angular-cli.json

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

ПРИМІТКА: Якщо використовується препроцесор SCSS, просто змініть css на scss

Приклад використання:

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

Optoin 2:

Існує офіційна історія для цього в даний час

Встановіть дивовижну бібліотеку шрифтів та додайте залежність до package.json

npm install --save font-awesome

Використання CSS

Щоб додати значки CSS шрифту Awesome у ваш додаток ...

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

Тест

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

Щоб переконатися, що шрифт Awesome налаштований правильно, перейдіть src/app/app.component.htmlдо наступного ...

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

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

Також є відповідне запитання Angular CLI видає шрифтові файли з дивовижними шрифтами кореня dist, оскільки за замовчуванням кутовий кліп виводить шрифти в distкорінь, що, до речі, зовсім не є проблемою.

За допомогою Angular2RC5 angular-cli 1.0.0-beta.11-webpack.8ви можете досягти цього за допомогою імпорту css.

Просто встановіть шрифт дивним:

npm install font-awesome --save

а потім імпортувати шрифтові файли в один із налаштованих файлів стилів:

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

(файли стилів налаштовані у angular-cli.json)

Думав, що я б вирішив це вирішити, оскільки шрифтовий дивовиж зараз встановлено по-різному відповідно до їх документації.

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

Про: Буде включена кожна ікона

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

Додайте наступний пакет:

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:

npm install @fortawesome/angular-fontawesome

Просто дотримуйтесь їх документації, щоб додати піктограми. Вони використовують іконки svg, тому вам потрібно лише додати svgs / значки, які ви дійсно використовуєте.

Після деяких експериментів мені вдалося виконати наступні роботи:

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 | eot | svg | ttf | woff | woff2)

Прийнята відповідь застаріла.

Для кутових 9 і Фонтазового 5

1. Встановіть FontAwesome

   npm встановити @ fortawesome / fontawesome-free - зберегти

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

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

3. Використовуйте це у своїй заявці

Редагувати: я використовую кутові ^ 4.0.0 та Електрон ^ 1.4.3

Якщо у вас є проблеми з ElectronJS або подібними, і у вас є помилка 404, можливе вирішення проблеми - це редагувати ваш файл webpack.config.js, додавши (і припускаючи, що у вас є модуль вузлового шрифту, встановлений через npm або у файлі package.json) :

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

Зверніть увагу, що конфігурація веб-пакета, яку я використовую, має src/app/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 копіює папку шрифтів у папку активів розробника.
• Webpack копіює папку активів розробки в папку " 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 вихідний шлях встановлений як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.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>

Шрифт Awesome надає вам scalableвекторні іконки, які можна миттєво налаштувати - розмір, колір, тінь і все, що можна зробити за допомогою сили CSS.

Створіть новий проект та перейдіть до проекту.

ng new navaApp
cd navaApp

Встановіть дивовижну бібліотеку шрифтів та додайте залежність до package.json.

npm install --save font-awesome

Використання CSS

Щоб додати значки CSS шрифту Awesome у ваш додаток ...

// 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 зміни, 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 install - зберегти шрифт-дивовижний кутовий-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>

Щоб використовувати шрифт 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">

Удачі!

Для джерела 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файл.

Використовуючи Менше (не SCSS) та Angular 2.4.0 та стандартний Webpack (не Angular CLI), для мене працювало наступне:

npm install --save font-awesome

та (у моєму додатку.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]'
        },

Навантажувач є, щоб виправити подібні помилки веб-упаковки

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

і regexp відповідає цим svg-посиланням (із специфікацією версії або без неї). Залежно від налаштування вашого веб-пакету він вам може не знадобиться або вам може знадобитися щось інше.

Додайте його у свою package.json як "devDependitions" font-awesome: "номер версії"

Перейдіть до командного рядка введіть команду npm, яку ви налаштували.

Я хотів використовувати Font Awesome 5+ і більшість відповідей зосереджуються на старих версіях

Для нового Font Awesome 5+ кутовий проект ще не був випущений, тому, якщо ви хочете скористатися прикладами, згаданими на веб-сайті ATM для шрифтів, вам потрібно скористатися. (особливо фас, далекі класи замість класу фа)

Я щойно імпортував cdn в Font Awesome 5 у моїх стилях.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]

Для кутових 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