Angular 2 + CLI プロジェクトに Font Awesome を追加する方法

Angular 2 + CLI プロジェクトに Font Awesome を追加する方法

Font Awesome のインストール

プロジェクトディレクトリで以下のコマンドを実行します。

npm install font-awesome --save

--save オプションを指定することで、package.json ファイルの dependencies セクションに Font Awesome が追加されます。

Angular CLI 設定ファイルの編集

angular.json ファイルを開き、apps セクション以下の styles プロパティに以下の行を追加します。

"../node_modules/font-awesome/css/font-awesome.css"

アイコンの使用

コンポーネントテンプレートファイルで、以下のコードを使用して Font Awesome アイコンを使用できます。

<i class="fa fa-home"></i>

上記の場合、fa-home クラスが適用された <i> 要素がレンダリングされ、ホームアイコンが表示されます。

利用可能なアイコン

Font Awesome は、数多くの無料アイコンを提供しています。利用可能なアイコンの一覧は、Font Awesome 公式サイト: https://fontawesome.com/icons で確認できます。

その他

• Font Awesome のバージョン 5 以降を使用する場合は、font-awesome.min.css ファイルではなく、font-awesome.css ファイルを使用する必要があります。
• アイコンを個別に使用したい場合は、@fortawesome/fontawesome-free パッケージをインストールして、必要なアイコンを個別にインポートすることができます。

注:

• 上記の手順は、Angular CLI バージョン 1.x 以降を使用していることを前提としています。
• バージョンによってコマンドや設定ファイルの書き方が異なる場合がありますので、詳細は各バージョンのドキュメントを参照してください。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {}
}

<h1>Font Awesome アイコン</h1>

<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-star"></i>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

上記コードを実行すると、ブラウザに以下の画面が表示されます。

• アイコンの色やサイズを変更したい場合は、CSS を使用してスタイルを設定することができます。
• アイコンを回転させたり、アニメーションさせたりすることもできます。

Font Awesome を Angular 2 + CLI プロジェクトに追加する他の方法

CDN を使用

Font Awesome の CDN を使用して、プロジェクトにアイコンを直接読み込むことができます。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

上記の場合、Font Awesome 4.7.0 がプロジェクトに追加されます。

import { Component } from '@angular/core';
import { faHome, faUser, faStar } from '@fortawesome/fontawesome-free';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {}
}

<h1>Font Awesome アイコン</h1>

<i [class]="faHome"></i>
<i [class]="faUser"></i>
<i [class]="faStar"></i>

ng-fontawesome ライブラリを使用すると、アイコンをより簡単に使用することができます。

<fa-icon [icon]="['fas', 'home']"></fa-icon>
<fa-icon [icon]="['fas', 'user']"></fa-icon>
<fa-icon [icon]="['fas', 'star']"></fa-icon>

上記の場合、fas は Font Awesome 5 の Solid アイコンセットを表します。

各方法の比較