IonicでFontAwesomeを使いたい

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

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

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

FontAwesomeをnpmインストール

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

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をコピーする記述を追加します。

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

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

CSSを読み込む

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

使ってみる

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

タブでの使い方

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

.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内がすっきりすると思います。

つまり、こう↓

解散!

Pocket

The following two tabs change content below.
Yuko Hashimoto

Yuko Hashimoto

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