web-dev-qa-db-ja.com

にfont-awesomeを追加する方法 Angular 2 + CLIプロジェクト

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

プロジェクトにfont-awesomeを追加する方法

angularwebpackangular-cli
221
Nik

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

  1. npm install font-awesome --save

  2. Angular-cli.jsonファイルでstyles[]配列を見つけ、以下のようにfont-awesome referencesディレクトリをここに追加します。

    "apps"：[
 {
 "root"： "src"、
 "outDir"： "dist"、
 .... 
 ] "styles"：[
 "styles.css"、
 "../node_modules/bootstrap/dist/css/bootstrap.css",
" ../node_modules/ font-awesome/css/font-awesome.css "//これでwebpackは自動的にlink css要素を構築します！？
]、
 ... 
} 
] 
 
]、

  3. あなたが欲しいどんなhtmlファイルにもいくつかの素晴らしいフォントアイコンを置いてください：

     <i class = "faアメリカ手話通訳fa-5x" aria-hidden = "true"> </i> 

  4. アプリケーションを停止する Ctrl + c ウォッチャーはsrcフォルダー専用で、Angular-cli.jsonは変更されていないため、ng serveを使用してアプリを再実行します。

  5. あなたの素晴らしいアイコンを楽しんでください！
417
AIon

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インフラストラクチャを台無しにしないでください。 ;）

107
F.D.Castel

一番上の答えは少し古くなっており、もう少し簡単な方法があります。

  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にコンポーネントをアップロードし、あなたがコンポーネントscssの中にfont-awesomeをインポートした場合、それはその時点で間違っているであろう相対パスではなく〜で適切に動作するでしょう。

このメソッドは、cssを含むすべてのnpmモジュールに対して機能します。それはscssにも働きます。 しかし あなたがあなたのstyles.scssにCSSをインポートしているなら、それは（そして多分その逆も）うまくいかないでしょう。 これが理由です

61
Ced

AngularプロジェクトでFont-Awesomeを使うための3つの部分があります

  1. Installation
  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');
  }
}

@NgModuleインポートにMatIconModuleを追加します

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

}

今すぐあなたが今できることができる任意のテンプレートファイルで

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
45
muttonUp

Angular2 RC5と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に設定されています）

13
shusson

オプション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を使用している場合は、angle-cli.json内のスタイルにfont-awesome CSSを追加してください。

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

注：SCSSプリプロセッサを使用している場合は、scssの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を実行してアプリケーションを開発モードで実行し、 http：// localhost：4200 に移動します。

Font Awesomeが正しく設定されていることを確認するには、src/app/app.component.htmlを次のように変更します。

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

このファイルを保存したら、ブラウザに戻ってアプリのタイトルの横にあるFont Awesomeアイコンを確認してください。

また、関連する質問もあります。 Angular CLIは、フォントの素晴らしいフォントファイルをdistルートで出力します デフォルトでは、Angular cliはフォントをdistルートに出力します。まったく.

7
Kuncevič

Angular 6の場合、

最初のnpm install font-awesome --save

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

node_modules/の前にドットを追加するには、 not を忘れないでください。

3
Alf Moh

いくつかの実験の後、私は以下の作業を成功させることができました。

  1. Npmでインストールします。

    npm install font-awesome --save

  2. angular-cli-build.js fileに追加：

    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）

3
Nik

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

お役に立てれば

3
Nabel

上記の多くの指示は、私はそれらを見てお勧めします。しかし、注意すべき点があります。

インストール後に私のプロジェクト（1週間前の新しいプラクティスプロジェクト）で<i class="fas fa-coffee"></i>動作しなかったを使うと、ここのサンプルアイコンもFont Awesomeから先週のクリップボードにコピーされました。

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

2
mckenna

この記事では Fontawesome 5 を Angular 6 に統合する方法について説明します（Angular 5およびそれ以前のバージョンも動作しますが、その後は私の文章を調整する必要があります）。

オプション1：CSSファイルの追加

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

Contra：すべてのアイコンが含まれます（すべてのフォントが含まれているため大きいアプリサイズ）

次のパッケージを追加してください。

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 package

Pro：小さいアプリサイズ

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

FontAwesome 5 Angularパッケージを使用してください。

npm install @fortawesome/angular-fontawesome

アイコンを追加するには、彼らのドキュメントに従ってください。彼らはSVGアイコンを使用しているので、あなただけのSVG /アイコンを追加する必要があります、あなたは本当に使います。

2
Paul

ここにはたくさんの良い答えがあります。あなたはそれらのすべてを試してもまだ代わりに四角形の代わりに素晴らしいアイコンを得ている場合は、あなたのCSSルールを確認してください。私の場合は、次のようにしました。

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

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

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

編集：私は角型^ 4.0.0と電子^ 1.4.3を使用しています

ElectronJS または類似の問題が発生し、404エラーが発生した場合は、webpack.config.jsを追加して（場合は、npmを使ってインストールしたか、npmを使ってインストールするか、またはpackage.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設定でこれを使いました：

// 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です。私のwebpack.configではoutput.pathがhelpers.root('src/app/dist');に設定されているので、パスはdistです。

だから、app.scssで：

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

このようにして、フォントパス（後で.scssファイルで使用される）を定義し、~font-awesomeを使用して.scssファイルをインポートし、node_modules内のフォントが素晴らしいパスを解決します。

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

1
briosheje

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

Angular Font Awesomeパッケージを使用できます

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

次に、モジュールにインポートします。

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

次に、angle-cliファイルにスタイルをインポートします。

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

npmライブラリのパッケージに関する詳細を参照してください。

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

0
Shmulik

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

彼らの最新のドキュメントはあなたが以下を使ってインストールするように指示します：

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>
0
Helzgate

NPMのfont-awesomeパッケージは、2016年以降更新されていません。

私の問題は、font-awesomeの後のバージョンで追加されたアイコンを使用していたことです。

0
squirtgun

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参照（バージョン指定の有無にかかわらず）と一致します。 Webpackの設定によっては、それが必要ない場合もあれば、それ以外のものが必要な場合もあります。

0
dpnmn

ウェブパック2の場合：

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

file-loader?name=/assets/fonts/[name].[ext]の代わりに

0
aristotll

なんらかの理由でnpmからパッケージをインストールできない場合。あなたはいつでもindex.htmlを編集し、頭に素晴らしいCSSフォントを追加することができます。そしてそれをプロジェクトで使用してください。

0
Semir Hodzic

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

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

0
user1349544

私はフォント恐ろしい5+を使用したいとほとんどの答えは、旧バージョンに焦点を当てます

あなたは、フォント素晴らしいウェブサイト上で述べた例を利用したい場合は気圧あなたの周りの仕事を使用する必要があるので、驚くばかりの新しいフォントについて5+角度のプロジェクトは、まだリリースされていません。 （特にFAS、代わりにFAクラスの遠クラス）

私はちょうど私のStyles.cssをで素晴らしい5をフォントにCDNを輸入してきました。念のためにこれを追加それは私が:-)たよりも、誰かが速く答えを見つけることができます

Style.cssによりコード

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