我应该使用免费的fontawesome还是angular-fontawesome

Question

我们正在启动Angular 6项目，并希望使用Font Awesome 5.1。 Font Awesome提供了两个Node程序包：

• @fortawesome/angular-fontawesome-将SVG与JS一起使用
• @fortawesome/fontawesome-free-在CSS中使用网络字体

使用 SVG和JS 是使用Font Awesome的新方法，而 Web字体和CSS 是更经典的方法。对我来说，将SVG与JS一起使用似乎有点麻烦，因为您必须import每个图标，但可以节省文件大小。

我们将在我们的应用中使用大约30个图标，并且想知道哪种方法更适合我们。

Answer 1

我只是想知道同一件事，所以即使它是基于观点的（因此可能会被封闭），我也会回答你：

我首先将库用作described in their guide。

我很快意识到，您无法不能使用所有想要的图标，因为无法使用fas或far图标。

所以我切换到“旧”方式：我使用以下方式安装了库

npm i @fortawesome/fontawesome-free

并将其导入到我的angular.json文件中：

projects -> yourProject -> architect -> build -> styles : {
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

我现在必须对

使用常规方法

<i class="fab fa-accessible-icon"></i>

但是我可以使用提供的所有图标，而不必使用单个图标。

Answer 2

其他一些注意事项：

1. angular-fontawesome与Angular框架紧密集成，因此，如果您认为可能需要一些数据绑定的图标（例如：带有未读邮件计数器的电子邮件图标，或者某些旋转角度与某些图标绑定的图标）数据值），那么使用angular-fontawesome可能会很不错，其中图标不仅呈现为SVG，而且呈现为Angular组件。
2. Font Awesome 5的SVG方法具有一些Web字体和CSS方法不具备的功能。例如，Power Transforms，Layers, and Counters。由于angular-fontawesome建立在具有JavaScript实现的SVG之上，因此它也支持所有这些额外功能。
3. 摇树/子集：您将不用的图标很多。如果您想在生产环境中优化下载资产的大小，则可能需要确保使用的是摇树，如果使用angular-cli，则会得到mostly automagically（警告：请参阅该链接，了解如何配置构建以解决构建性能下降问题，这会使Webpack 4生产构建缓慢进行，直到发布修复程序为止。）

Answer 3

使用Angular Font Awesome，因为它是Angular组件。也作为SVG呈现，因此有助于数据绑定逻辑。