我应该使用 fontawesome-free 还是 angular-fontawesome

Posted 2023-03-06

【中文标题】我应该使用 fontawesome-free 还是 angular-fontawesome

【英文标题】：Should I use fontawesome-free or angular-fontawesome

【发布时间】：2018-12-14 22:51:05

【问题描述】：

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

@fortawesome/angular-fontawesome - 将 SVG 与 JS 结合使用 @fortawesome/fontawesome-free - 使用带有 CSS 的 Web 字体

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

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

【问题讨论】：

致以“主要基于意见”的方式投票结束此内容的人们：真的有 没有 事实可以用来帮助人们在 SVG 和 Web 字体之间进行选择吗？使用网络字体和 CSS 真的 在每一种 情况下都一样好吗？如果是这样的话，我会重视捍卫该立场的答案。

【参考方案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>

但我可以使用提供的所有图标，而不仅仅是一组。

【讨论】：

如果我错了，请纠正我，但我认为far 图标是 PRO 功能，需要付费许可证，这就是你不能使用它们的原因。 fas 是默认免费版本（与fa 相同）

嗯，你可能错了，因为我没有用“旧方式”付费就使用它们，但由于我不是字体很棒的专业人士，我也不能确定我没有错!

假设您不会直接修改它，我建议您在 angular.json 中使用较小的缩小版本 (all.min.css)，而不是 all.css。

【参考方案2】：

其他一些注意事项：

angular-fontawesome 与 Angular 框架紧密集成，所以如果你认为你可能想要一些数据绑定图标（例如：带有未读消息计数器的电子邮件图标，或者一些带有旋转角度的图标，绑定到模型中的某些数据值)，那么您可能会发现使用 angular-fontawesome 会很好，其中图标不仅呈现为 SVG，还呈现为 Angular 组件。 Font Awesome 5 的 SVG 方法具有 Web Fonts 和 CSS 方法不具备的一些功能。例如，Power Transforms、Layers, and Counters。由于angular-fontawesome 是在 SVG 上构建并使用 javascript 实现，因此它也支持所有这些额外功能。 Tree-shaking / subsetting：有很多很多你不会使用的图标。如果您关心在生产构建中优化下载资产的大小，那么您可能需要确保您使用的是 tree-shaking，如果您使用 angular-cli，您将得到 mostly automagically（注意：请参阅有关配置您的构建以解决构建性能回归问题的链接，该回归会导致 Webpack 4 生产构建速度变慢，直到修复发布。）

【参考方案3】：

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