为什么 FontAwesome 仍然很棒

我读到一篇有趣的文章，作者解释了他们正式放弃FontAwesome 的原因。考虑到我所有项目都使用 FontAwesome，并且对它的各种实现足够熟悉，我对此很感兴趣。

令我惊讶的是，所有给出的理由都围绕着一个核心问题——生产环境实施不当。仅仅因为不恰当或不切实际的实施就对 FontAwesome 整体做出负面评价，似乎有点不公平。这就像因为很多人把烤面包机放在浴室里（结果发生了不幸的事故）就给烤面包机制造商差评一样。这并非制造商的失误……

FontAwesome 可以通过多种方式实现，例如使用Kits、下载和托管 SVG 文件，以及我个人最喜欢的方式：将 FontAwesome npm 包导入到您的项目中并使用库进行选择性图标导入。

开发人员很少应该在生产应用程序或网站中托管和链接整套 FontAwesome CSS 文件（除非他们愿意接受随之而来的风险，或者项目需求需要这样做）。但需要明确的是：这并非最佳或推荐的实现方法，因此，它不应被用作衡量 FontAwesome 整体实用性和实用性的标准。

让我们来讨论一下原始帖子中的观点……

误区一：版本管理简直就是噩梦

前提：

如果你在 2018 年搭建网站，你可能用过 FontAwesome 5。[...] 假设你需要一个 Gameboy 图标。[...] 但它不起作用。以下是所有原因。

开始了...

原因 1：您使用的是 FontAwesome 5.0。而这是在 FontAwesome 5.11.0 上。

如果使用 npm 将其实现为项目依赖项，则对 FontAwesome 包的快速更新将为您提供所有最新的图标。

或者，如果您已实现套件，则所有最新图标都将根据您选择的版本提供给您。您可以登录 FontAwesome 帐户轻松检查和更新套件版本。

原因 2：这是一款“专业”字体。您使用的是免费版本。

在 FontAwesome 网站上搜索要使用的图标时，只需单击“免费”过滤器，这样您就只列出项目可用的图标。

原因三：您一直在导入纯色字体。您应该需要精简版。

然后安装 light-style npm 包并导入您需要的图标。

更好的是，如果您已经将 FontAwesome 作为套件实现，那么您就可以自动访问每一个图标样式。

误区二：导入数千个未使用的图标

前提：

你的网站实际用了多少个图标？大概6个或7个？大多数网站（我自己也这么说）只用了几个图标。[...] 如果你导入了fontAwesome的regular.css，你就引入了数百个你不需要的字体图标。如果你同时导入了一个圆形问号图标（它存在于regular.css中）和一个Facebook图标（它存在于brands.css中），那就更糟糕了。这样一来，导入的字体就多达数千种……而且都在浪费带宽。

同样，如果设置得当，只有您实际使用的极少数导入的图标（及其支持的 CSS 样式）才会添加到最终转译的构建文件中。

进一步阅读：

辩护者可能会说，“好吧，你可以对其进行摇晃”或“对其进行优化”。

你说得对！那么……有多少开发者知道该怎么做，或者有勇气去设置它呢？

确实有一些共同点！虽然我很高兴听到作者同意 FontAwesome 的捍卫者是正确的，但我还是对这样的假设感到吃惊：以最佳方式实现 FontAwesome 是一项艰巨的任务，超出了大多数开发人员的能力和理解范围。

最后：

TailwindCSS 也包含了所有功能。此外，它们还提供了辅助工具来精简所有内容，以便您交付绝对最小、性能最高的 CSS。

与 TailwindCSS 的比较毫无意义，因为 FontAwesome 提供了相同的开箱即用的优化选项，前提是你选择的实现方法支持它。例如，使用 npm 包并导入选定的图标，可以确保在编译后的构建中只包含相关的图标数据和 CSS。

使用 Kits 意味着这些数据都不会包含在最终构建中，并且特定的 CSS 和 SVG 数据会在客户端渲染页面时发送给用户。

误区 3——调整图标大小是一场噩梦

前提：

字体图标的一个主要问题是，你首先把它们当成字体，而不是图标。你希望一个马的图标宽度为 100px。这样不行.fa-horse { width: 100px; /* does nothing */ }：

相反，您必须使用字体大小来解决这个问题。

这也意味着这些图标也会受到其他 CSS 文本修饰符（如行高）的影响。

FontAwesome 之所以使用这个font-size属性，是因为图标的大小是相对于其周围的内容和 UI 元素而言的。当你在按钮标签旁边放置一个上下文图标时，图标会自动将其大小与按钮标签文本的大小匹配，这很棒。需要让图标更大一点吗？只需添加这个fa-lg类即可。

快速浏览一下文档，您就会知道有关调整图标大小的所有信息。

误区四：主要版本的发布会全面破坏兼容性

前提：

<!-- FontAwesome 3 -->
<i class="icon-star"></i> 

<!-- FontAwesome 4 -->
<i class="fa fa-star" aria-hidden="true"></i>

<!-- FontAwesome 5 -->
<i class="fas fa-star"></i>

<!-- FontAwesome 6 -->
<i class="fa-solid fa-star"></i>

如果我想将 FontAwesome 3 升级到 FontAwesome 6，我必须找到所有标记并修复它。

如果有人使用 FontAwesome 3，当然，他们必须这样做。

但是，从 FontAwesome 4 开始，向后兼容性已内置。您可以将 v4 或 v5 项目升级到 v6，而无需对标记进行任何更改。

如果您查看文档的“更改内容”部分的“向后兼容性”部分，您会发现对使用旧式语法（甚至旧图标名称和 Unicode 值）的支持是现成的。

🙅‍♂️ 误区 #5 - 你必须升级你的计划才能获得最新的图标

前提：

如果我拥有 2019 年购买的 FontAwesome 5 Pro，并且想要一个 [细长风格的百吉饼图标]，我必须执行以下操作之一：

选项 1：保留 FontAwesome 5 Pro 并包含 FontAwesome 6 [细风格图标]
选项 2：购买 FontAwesome 6 Pro。

为了得到一个 [百吉饼图标]，我现在可以选择破解我的版本或支付 99 美元。

答案很简单：直接用图标就好！ FontAwesome 的专业版套餐包含始终使用最新版本的任何图标。因此，当 v7 正式发布时，您也能使用这些图标，无需升级套餐或额外付费。

总之

所有这些问题都有解决方法。问题是——所有这些问题都源于使用 FontAwesome！

这几乎是真的。我甚至想说，“所有这些问题都完全是因为 FontAwesome 的实现方式不够优化”。

如果实现得当，FontAwesome 可以为您的项目提供精简、易用且可扩展的图标。原帖将臃肿和“快速”实现中存在的问题与整个服务混为一谈，我认为这误导了人们，让他们忽视了它在正确使用时所拥有的诸多实用功能。

在我看来，FontAwesome 仍然很棒。

☝️ 记住：始终只导入您需要的图标，对您的项目进行树形调整，并且切勿在浴缸中烤面包。

💬 你怎么看？你参与过的项目实现 FontAwesome 的方式是不是不太好？你最喜欢的在项目中添加图标的方法是什么？我期待在下面的评论区听到你的观点和想法！

这篇文章原本是一条评论，我想把它扩展成一篇更长的回复。你可以在这里查看原文和我的评论：

帖子： https ://dev.to/rockykev/im-officially-done-with-fontawesome-2h2f

评论： https://dev.to/danwalsh/comment/1p8e4