如何在 ionic 2 rc0 中使用 fontawesome？答案

【问题标题】：How to use fontawesome in ionic 2 rc0?如何在 ionic 2 rc0 中使用 fontawesome？
【发布时间】：2016-10-01 19:14:14
【问题描述】：

如何在ionic 2 rc0 中使用fontawesome，因为没有gulp/grunt 文件，所以我可以将文件添加到构建过程中？

【问题讨论】：

标签： ionic2

【解决方案1】：

这是我在搜索同一主题时遇到的一篇文章。

https://chriztalk.com/ionic-2-font-awesome-using-sass/

这里有一个要点：

创建一个新的配置目录作为 ionic 2 项目的根目录：
```
$ mkdir config
```
在此文件夹中找到copy.config.js 和sass.config.js 文件：/node_modules/@ionic/app-scripts/config/ 并将它们复制到您刚刚创建的文件夹中。

将这些行添加到您刚刚创建的config 目录中的新copy.config.js。

...
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}}/fonts/'
},
...

将这些行添加到您刚刚创建的config 目录中sass.config.js 文件的includePaths[] 块中：
```
...
includePaths: [
  ...
  'node_modules/font-awesome/scss',
  ...
],
...
```

在您的 package.json 文件中添加一个配置块，其中包含以下参考：

...
"config": {
  "ionic_copy": "./config/copy.config.js",
  "ionic_sass": "./config/sass.config.js"
},
....

在您的 app.scss 文件中导入 font-awesome：
```
...
@import 'font-awesome';
...
```

最后，像在任何 html 文件中一样使用 font awesome：

<h1><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; Font Awesome</h1>

【讨论】：

我不是特别喜欢这种方法，因为如果核心复制脚本 (/node_modules/@ionic/app-scripts/config/) 发生更改，您将不会在脚本中获得这些更改。我更愿意修复 FA 的版本，然后手动将其从 NodeModules 复制到 Assets 文件夹中，并在需要时手动升级

【解决方案2】：

在将 FontAwesome 添加到 ionic2 应用程序时，什么是最佳实践仍然存在很多困惑，因此我写了一篇关于它的文章以减轻一些困惑。我希望这可以帮助其他寻找正确答案的人 http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

【讨论】：

【解决方案3】：

只需将字体真棒的cdn css链接添加到您的index.html

或者您可以使用@import of sass 将其添加到您的项目中

@import 'lib/fa.css'

【讨论】：

我不想添加额外的css/js 文件。我想将它包含在构建过程中，该过程将自动将其合并到main.css 文件中