在我以前的Ionic(1.3)应用程序中,我使用了“Font Awesome”作为一个图标集,但在Ionic 2中有很多变化。我使用的gulp脚本已经消失,构建过程在npm包中定义。
您可以在https://github.com/driftyco/ionic-appscripts上阅读更多信息
以下是在Ionic 2中如何做:
我们开始创建一个新的应用程序或cd到你现有的应用程序文件夹。
$ ionic start ionic2FontAwesome blank --v2
$ cd ionic2FontAwesome
我们来添加Font Awesome并保存到你的package.json。
$ npm install font-awesome --save
在项目根目录下创建配置文件夹。
$ mkdir config
找到此文件夹中的copy.config.js文件:/node_modules/@ionic/app-scripts/config/copy.config.js
,并将其复制到刚刚创建的文件夹。
更新文件如下(注意看最后两行copyFontAwesomeCSS和copyFontAwesome):
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}}'
},
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,因此它使用新的配置复制文件:
...
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"config": {
"ionic_copy": "./config/copy.config.js"
},
"dependencies": {
...
在src/index.html中添加此行,以包含font-awesome css文件。
...
...
更改page/home/home.html以检查它是否正常工作:
Ionic Blank
Font Awesome
启动查看下效果吧(一定要注意,如果你在修改前,已经启动了ionic,那么请重启后才会生效):
$ ionic serve
如果你想看看如何做sass的方式,你可以使用Sass来检查我的帖子Ionic 2和Font Awesome。
您可以在这里下载一个工作版本。
如果您想阅读关于在您的Ionic 2应用程序中使用其他字体,您可以在https://chriztalk.com/using-google-fonts-ionic-2/上阅读我的 信息。
[本文译自:https://chriztalk.com/ionic-2-font-awesome/]