QOXホームへ

IonicでFontAwesomeを使いたい

Yuko Hashimoto

Yuko Hashimoto

Ionicにはそのまま使えるアイコン「Ionicons」が用意されています。
http://ionicframework.com/docs/ionicons/

しかし、これだけでは物足りないことも当然あります。
せっかくHTMLとCSSで書けるんだからFontAwesomeも使いたいなー、ということでメモ。

こちらを参考にしています。
Best practice when adding FontAwesome to an ionic2 app

FontAwesomeをnpmインストール

npm install --save font-awesome

フォントファイルをコピーするスクリプト

configフォルダ内のcopy.config.jsをコピー&書き換えて使います。

プロジェクトフォルダ/
├── node_modules/
│ ├── @ionic
│ │ ├── app-scripts
│ │ │ ├── config
│ │ │ │ └── copy.config.js ←これ

node_modules/@ionic/app-scripts/config/copy.config.js をコピー。
gitからDLしても良さそうです。
https://github.com/driftyco/ionic-app-scripts/tree/master/config

名前を変更し、わかりやすいところに置きます。
今回は「copy.config-custom.js」として、プロジェクトフォルダ直下に置きました。

FontAwesomeのフォントとCSSをコピーする記述を追加します。

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
    dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  },
  copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyFontawesomeCss: {
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
    dest: '{{WWW}}/assets/css'
  },
}

package.jsonでこの設定を使うよう追記します。

  "config": {
    "ionic_copy": "./copy.config-custom.js"
  }

最終行で大丈夫です。たぶん。

CSSを読み込む

index.html内でFontAwesomeのCSSを読み込みます。
main.cssの次に読み込む感じで。

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

使ってみる

<ion-header>
  <ion-navbar>
    <ion-title>Webフォントだ</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2><i class="fa fa-leaf" aria-hidden="true"></i> FontAwesomeを使いたい</h2>

  <ion-list>
    <ion-item>
      <ion-icon name="ios-settings" item-left></ion-icon>
      少しずつ
    </ion-item>
    <ion-item>
      <ion-icon name="md-settings" item-left></ion-icon>
      印象が
    </ion-item>
    <ion-item>
      <ion-icon class="fa fa-cog" item-left></ion-icon>
      違うから
    </ion-item>
  </ion-list>
</ion-content>

普通にiタグやspanタグにclassを指定しても使えますし、Ioniconsと同じようにion-iconタグでも使えちゃいます。

タブでの使い方

ion-tabではtabIcon属性で指定した文字列に対し、before要素のcontentで対応するコードを指定するとFontAwesomeも使用できます。
tabIconの内容はそのままaria-labelとして使用されるので、「fa-」が付いていない方が良い気がします。

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="coffee"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="birthday-cake"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="cutlery"></ion-tab>
</ion-tabs>
.ion-md-coffee:before,
.ion-ios-coffee:before,
.ion-ios-coffee-outline:before {
  content: "\f0f4";
  font-family: "fontawesome";
}

.ion-md-birthday-cake:before,
.ion-ios-birthday-cake:before,
.ion-ios-birthday-cake-outline:before {
  content: "\f1fd";
  font-family: "fontawesome";
}

.ion-md-cutlery:before,
.ion-ios-cutlery:before,
.ion-ios-cutlery-outline:before {
  content: "\f0f5";
  font-family: "fontawesome";
}

.ion-md-文字列・・・Androidの表示
.ion-ios-文字列・・・iOSの表示(選択中)
.ion-ios-文字列-outline・・・iOSの表示(非選択)

おわりに

他のWebフォントやオリジナルなアイコンにも応用できますね。
今回使ったのはFontAwesomeの中でもフォントファイルとfontawesome.min.cssのみなので、もっとファイルが減らせそうです。

追記

この記事を書いた後に「assetsフォルダ全体がもともとコピーされるなら、copy.config.jsとかいじらなくてもnpm使わずにDLしてきたフォントとCSSをassets内に入れて参照すれば良いのでは…」と気付きました。
できました。
簡単でした。
あとCSSの読み込みはIoniconや基本のフォントと同じくvariables.scss内がすっきりすると思います。

つまり、こう↓

解散!

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up