Ionic 2 プロジェクトで Font Awesome を使う方法

Ionic 2 で Font Awesome を利用する方法を説明します。

次のコマンドで Font Awesome をインストールします。

$ npm install font-awesome --save

次に config という名前のフォルダを作り、@ionic ノードモジュール以下の copy.config.js をそこにコピーします。

$ mkdir config
$ cp ./node_modules/@ionic/app-scripts/config/copy.config.js ./config

コピーした config/copy.config.js に次を追加。

  copyFontAwesomeCSS: {
      src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css',
      dest: '{{WWW}}/assets/css/'
  },
  copyFontAwesome: {
    src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
    dest: '{{WWW}}/assets/fonts/'
  }

package.json に次を追加。

  "config": {
    "ionic_copy": "./config/copy.config.js"
  },

index.html に次を追加。

<link href="assets/css/font-awesome.min.css" rel="stylesheet"/>

以上で Font Awesome が利用できます。