Angular 2+とAngular CLIを使用しています。

プロジェクトにfont-awesomeを追加するにはどうすればよいですか？

Angular 2.0の最終リリース後、Angular2 CLIプロジェクトの構造が変更されました。ベンダーファイルは不要で、system.jsは不要です。webpackのみが必要です。そうしたらいい：

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. いくつかのfont-awesomeアイコンを任意のhtmlファイルに配置します。

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

4. アプリケーションを停止Ctrl+をc使用してアプリケーションを実行して再その後、ng serveウォッチャーは、変更のために観察されないsrcフォルダと角度-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";

~willを使用すると、sassを調べますnode_module。相対パスを使用するよりも、この方法を使用することをお勧めします。その理由は、npmにコンポーネントをアップロードし、コンポーネントscss内にfont-awesomeをインポートすると、その時点で間違っている相対パスではなく〜で正しく機能するためです。

このメソッドは、cssを含むすべてのnpmモジュールで機能します。scssでも動作します。ただし、cssをstyles.scssにインポートしている場合は機能しません（逆も同様です）。ここに理由があります

Angular ProjectsでFont-Awesomeを使用するには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>

Angular Materialでの使用

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年2月更新：
fortawesomeパッケージがサポートするng addようになりましたが、angular 9でのみ使用できます。

ng add @fortawesome/angular-fontawesome

更新2019年10月8日：

新しいパッケージを使用できます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を使用している場合は、angular-cli.json内のスタイルにfont-awesome CSSを追加します。

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

注：SCSSプリプロセッサを使用している場合は、cssをcssに変更するだけです

使用例：

<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アイコンを確認します。

また、関連する質問もあります。AngularCLIは、distルートでfont-awesomeフォントファイルを出力します。デフォルトでは、angular cliはdistルートにフォントを出力するためですが、これはまったく問題ではありません。

Angular2RC5とangular-cli 1.0.0-beta.11-webpack.8、あなたは、CSSの輸入でこれを達成することができます。

素晴らしいフォントをインストールするだけです：

npm install font-awesome --save

そして、設定したスタイルファイルの1つにfont-awesomeをインポートします。

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

（スタイルファイルはで設定されますangular-cli.json）

font-awesomeがドキュメントに従って異なる方法でインストールされるようになったので、私はこれに私の解像度を投入すると思いました。

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

なぜそれがfortawesomeなのかは今ではわかりませんが、私は古いfont-awesomeにフォールバックするのではなく、最新バージョンにこだわると思いました。

次に、それを自分の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> できませんでしたインストール後、私のプロジェクト（1週間前の新しい練習プロジェクト）ここのサンプルアイコンも、先週内にFont Awesomeからクリップボードにコピーされました。

これ<i class="fa fa-coffee"></i> は機能します。Font Awesomeをプロジェクトにインストールした後、まだ機能しない場合は、アイコンのクラスをチェックして「s」を削除し、機能するかどうかを確認することをお勧めします。

ここには多くの良い答えがあります。しかし、それらすべてを試してもfontawesomeアイコンの代わりに正方形が表示される場合は、CSSルールを確認してください。私の場合、次のルールがありました：

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

そしてそれはfontawesomeフォントを上書きします。私の問題*をbody解決するためにセレクターを置き換えるだけです：

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

Angular 6の場合

最初 npm install font-awesome --save

angular.jsonに追加 node_modules/font-awesome/css/font-awesome.cssします。

の前にドットを追加しないでくださいnode_modules/。

この投稿では、Fontawesome 5をAngular 6に統合する方法について説明します（Angular 5以前のバージョンでも機能しますが、私の文章を調整する必要があります）。

オプション1：css-Filesを追加する

プロ：すべてのアイコンが含まれます

反対：すべてのアイコンが含まれます（すべてのフォントが含まれるため、アプリのサイズが大きくなります）

次のパッケージを追加します。

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：Angularパッケージ

プロ：アプリのサイズが小さい

反対：あなたはあなたが別々に使用したいすべてのアイコンを含める必要があります

FontAwesome 5 Angularパッケージを使用します。

npm install @fortawesome/angular-fontawesome

ドキュメントに従ってアイコンを追加してください。それらはsvg-iconsを使用するので、実際に使用するのは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）

受け入れられた回答は古くなっています。

Angular 9およびFontawesome 5の場合

1. FontAwesomeをインストールする

   npm install @ fortawesome / fontawesome-free --save

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ファイルにfont-awesomeノードモジュールがインストールされていると想定して）をueditすることです。 ：

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

私が使用しているwebpack構成にはsrc/app/dist出力があり、distでは、assetswebpackによってフォルダーが作成されることに注意してください。

// 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が開発アセットフォルダーをアセットフォルダーにコピーしていdistます

これで、ビルドプロセスが完了すると、アプリケーションは.scssアイコンを含むファイルとフォルダーを探し、アイコンを適切に解決する必要があります。それらを解決するために、私はこれを私のwebpack設定で使用しました：

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

最後に、.scssファイルでfont-awesome .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ファイルで使用）を定義し~font-awesome、でfont-awesomeパスを解決するためにを使用して.scssファイルをインポートすることに注意してくださいnode_modules。

これはかなりトリッキーですが、Electron.jsで404エラーの問題を回避するために私が見つけた唯一の方法です

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]'
}

AngularCLI 6.0.3とMaterial Designで動作するFontAwesome 5.2.0の最新バージョンを入手しようとすると、数時間無駄になりました。FontAwesome Webサイトからnpmのインストール手順に従いました

彼らの最新のドキュメントでは、以下を使用してインストールするように指示しています：

npm install @fortawesome/fontawesome-free

数時間を浪費した後、私は最終的にそれをアンインストールし、次のコマンドを使用してfont 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>

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変更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 --save 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>

AngularプロジェクトでFont Awesome 5を使用するには、以下のコードを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";

そしてもちろん、この明白で非常に直感的なスニペット（webpack.confのmodule.loaders内）が必要になる場合があります

        {
            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-referencesに一致します（バージョン指定あり、またはなし）。Webpackの設定によっては、それが必要ない場合や、別のものが必要になる場合があります。

package.jsonに "devDependencies" font-awesome： "version number"として追加します

構成したコマンドプロンプトタイプnpmコマンドに移動します。

Font Awesome 5以降を使用したかったのですが、ほとんどの回答は古いバージョンに重点を置いています

新しいFont Awesome 5+の場合、angularプロジェクトはまだリリースされていないため、font awesomeのWebサイトで言及されている例を利用する場合は、回避策を使用する必要があります。（特にfas、faクラスではなくfarクラス）

styles.cssでcdnをFont Awesome 5にインポートしました。誰かが私よりも早く答えを見つけられるように、これを追加しました:-)

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

詳細はこちらをご覧ください

Angular CLIにfontAwesomeをインストールする方法はいくつかあります。

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