在我以前的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/]