Angular:Font Awesome升级(v4→v5)

首先

在现有的产品中,我们希望使用 Font Awesome 5.0.0 及以上的图标,所以我们升级到了v5版本。
在v5版本中,出现了Pro版且图标的名称也发生了变化,所以升级过程相对较为麻烦,我在这里留下来以备未来参考。
请注意,以上假设是在 Angular-CLI环境下进行的。

我想将更新内容交由这篇文章来介绍。

关于更改图标名称

在我的环境中没有问题,但由于更新,现在需要改变之前的图标名称。
由于从v4版本升级过来,有些详细的更改步骤,请参考一下。

从v4版本升级的步骤

1. 卸载旧版的fontawesome

npm uninstall fontawesome

2. 安装新的fontawesome(包名已更改!)
不知为何,不再是font,而是变成了fort,请小心打错字!

npm install --save-dev @fortawesome/fontawesome-free

3. 修改「.angular-cli.json」(如果是angular-cli v4或更高版本,则修改为angular.json)

由于angular-cli的版本不同,路径的写法也会有所不同,请根据您的环境进行适当调整。

"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"styles.scss"
],

请将以下内容用中文进行本地化改写,只需提供一种选项:

请将以下内容用中文进行改写,只需提供一种选项:

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

请注意,和之前一样,第一个目录路径名称不是font,而是fort,请小心输入错误!

补充

我也在使用angular-font-awesome这个包,但是我不需要更新它。

同样,可能存在与其他包或模板存在依赖关系的情况,请注意。
由于v4与包名不同,我曾考虑过是否可以共存,但并没有尝试过。对不起。