Ionicにはそのまま使えるアイコン「Ionicons」が用意されています。
http://ionicframework.com/docs/ionicons/
しかし、これだけでは物足りないことも当然あります。
せっかくHTMLとCSSで書けるんだからFontAwesomeも使いたいなー、ということでメモ。
こちらを参考にしています。
Best practice when adding FontAwesome to an ionic2 app
$ 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"
}
最終行で大丈夫です。たぶん。
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内がすっきりすると思います。
つまり、こう↓
解散！
