Angular：Font Awesome升级（v4→v5）

1 年 ago

雅, 悟

1 minute

首先

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

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

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

１. 卸载旧版的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与包名不同，我曾考虑过是否可以共存，但并没有尝试过。对不起。