Ionic 3 升级FontAwesome 4至5的正确实现方案求助

我之前维护Ionic 3项目时也碰到过完全一样的问题——想升级到FontAwesome 5但不想改原来的<i>标签写法，按照官网Node.js指南操作后还触发了require.js加载错误。后来找到了适配Ionic 3的稳妥方案，一步步给你说：

第一步：清理旧的FontAwesome依赖（如果已安装） #

如果之前通过npm装过FontAwesome 4，先彻底卸载：

npm remove font-awesome --save

第二步：安装FontAwesome 5免费版 #

Ionic 3基于Angular 5，不支持最新的FontAwesome Angular组件，所以我们用Web Fonts + CSS的方式，这是最适合保留原有标签写法的方案：

npm install @fortawesome/fontawesome-free --save

第三步：配置Angular构建脚本自动引入CSS #

打开项目根目录下的angular-cli.json（注意Ionic 3用的是这个配置文件，不是后续版本的angular.json），找到apps[0].styles数组，添加FontAwesome的CSS路径：

"styles": [
  "styles.css",
  "../node_modules/@fortawesome/fontawesome-free/css/all.css"
]

这样Angular构建时会自动把FontAwesome的CSS打包进项目，完全避开require.js的加载冲突问题，不用再手动在index.html里引入JS或CSS。

第四步：验证原有标签用法 #

现在你可以继续使用原来的标签写法了，比如：

<i class="fa fa-close" style="color : darkgray"></i>

注：FontAwesome 5对部分旧类名做了兼容，但新增图标需要用风格前缀（比如fas代表solid风格），不过你原来的旧图标写法基本都能正常工作。

为什么之前的方法会出错？ #

你之前按照官网Node.js指南操作时，大概率引入了FontAwesome的JS组件，但Ionic 3的require.js加载环境和该组件的模块化加载方式不兼容，所以才会出现Module name "@fortawesome/fontawesome" has not been loaded yet的错误。用CSS+Web Fonts的方式完全绕开了JS加载逻辑，最适合你的需求。

内容的提问来源于stack exchange，提问作者V. Pivet