web-dev-qa-db-ja.com

NPMでFont awesome 5をインストールする

私はAngular（6）アプリケーションで作業しています。FAアイコンとドロップダウンをうまく使用しようとしています。私は次のようなFA（4）アイコンを正常に使用しています：

<i class="fa fa-align-justify"></i>

しかし：動作していません、私はこのコマンドを使用してFAをインストールしています

npm install font-awesome --save

This image はpackage.jsonから

node_modulesフォルダーで、FA.cssを参照できますが、Font Awesome 4.7.0 ...image

angular.jsonファイルで、FAを参照しました："node_modules/font-awesome/css/font-awesome.min.css",

that oneNPM経由でインストールされたawesome 5フォントの使用方法

他に何をする必要がありますか？

angularfont-awesomefont-awesome-5
10
E.Meir

バージョン5では、次のパッケージ@fortawesome/fontawesomeが必要です

次のコマンドを使用します。

npm install @fortawesome/fontawesome-free

ここにアクセス

Fontawesomeには、Angular専用のパッケージがあります。 Angularの使用方法を学ぶには、 here をクリックしてください

20
itsmysterybox

編集：

明確にするために、以下の答えは誤ってFont Awesome 5ではなくFont Awesome 4.7.0を考慮しています。

元の：

次のことを行うだけで機能するはずです。

npm install font-awesome --save

そして追加：

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

...styles.cssまたはstyles.scssに。

もう1つのオプションは、公式のフォントawesome 5 angularコンポーネントを使用することです

npm add @fortawesome/fontawesome-svg-core
npm add @fortawesome/free-solid-svg-icons
npm add @fortawesome/angular-fontawesome

テンプレートで：

<div style="text-align:center">
  <fa-icon [icon]="faAlignJustify"></fa-icon>
</div>

TypeScriptで：

import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faAlignJustify = faAlignJustify;
}

コンポーネントのモジュール内：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ]
})
export class MyModule { }
5
Wingnod

私にとっての障害は、インストールドキュメントの最後の部分でした。ヘッドタグ内のall.cssファイルを参照するように指示されています。

私は間違っていませんでした。

これにリンクする正しい方法は次のとおりです。

お役に立てれば！

これで動作するはずです。また、FontAwesomeガイドを使用してnpmパッケージの最新バージョンを再インストールすることをお勧めします。 https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

1
Dan Haddock