如何使用 Font Awesome 6 图标？

Question

如何使用 Font Awesome 6 图标？

27

以前我使用过 Font Awesome 图标（之前的版本）。当时，我在我的 HTML 中使用了如下的 CDN。但现在我找不到它了。有没有使用它们的方法发生了变化？

我之前使用过 Font Awesome 的图标（旧版），当时我在HTML中使用了类似以下的CDN。但是现在我找不到它了。是否有任何更改使用它们的方法？

<link rel="stylesheet" 
  href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

- Rocky Barua

2

从他们的文档页面中可以看到，他们说：“Font Awesome CDN不支持v6，所以最好使用Kit。” 看起来他们不希望您使用CDN，但是您可以在下面的答案中使用CDN链接。 - vee

@vee 请注意使用诸如“below”之类的参考。目前（至少按照我的排序），您正在支持一个可以改进的答案... - Yunnosch

@Yunnosch 这是评论区，字符数是有限制的。目前至少有2个答案使用了CDN。所以，只需向下滚动并尝试这些链接，就不难理解了。这应该很容易理解，也不应该是问题的关键点。 - vee

Font Awesome越来越不靠谱了，它最初是一个众筹的CDN项目，现在却变成了一个默认勾选的电子邮件营销策略，实际上却损害了网页性能，因为客户端无法将相同的CDN资源存储在浏览器缓存中。 - undefined

3个回答

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

将此链接添加到html文件的head中，并使用字体awesome链接添加图标，如果链接类似于

<i class="fa fa-camera-retro"></i>

您希望将它用于页面内部的<a>标签中，例如

<a><i class="fa fa-camera-retro"></i> fa-camera-retro</a>

- Marynathan Judson

因为你的链接中有一个指向 Font Awesome 版本 4.7.0 的 href，所以被 downvoted。 - Hero Wanders

非常抱歉，我会更新 Font Awesome 6.0.0 版本的链接。 - Marynathan Judson

3

值得注意的是，虽然CDN是可行的（您也可以下载文件并本地托管），但这些字体是“免费计划”版本的有限子集。（https://fontawesome.com/docs/web/setup/host-yourself/webfonts）

例如，fa-envelope-o将显示为免费图标，但在webfonts或all.css中查找时，它没有被包含。但是，如果您注册免费计划（https://fontawesome.com/plans），它确实会出现。他们会发送给您一个.js链接以包含，但您每月仅限于10k连接。对于大多数网站来说，这将是合适的，并且比CDN选项开启了更大的选择。

我与FA无关-只是发现自己下载和托管字体是毫无意义的，最好还是注册！

- Antony

10K对我的博客来说很少，是否有带CDN选项的替代方法？ - Cemstrian

1

我不是专家，但我认为如果10k不够的话，你可能需要付费。每年99美元也不算太糟糕——这取决于你需要多少个图标。或者你可以寻找其他免费的图标提供商作为替代选择。 - Antony

1

这个项目已经变成了一个完全荒谬的项目，这就是当我们支持独立创作者时会发生的事情...到了这个地步，我倒是希望谷歌的材质图标能够继续像最近这样迅速扩展下去。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karl Hill · Accepted Answer

要使用新的免费Font Awesome 6，您可以再次像下面这样使用CDN（如果这是您的首选）。

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

然后，在你的HTML中使用图标，如下所示。

<i class="fa-solid fa-house"></i>