我们正在将图标升级到 Font Awesome 6!

什么是 Font Awesome?

Discourse 在其界面中使用了来自 Font Awesome 的免费图标集。您会在工具栏、徽章、按钮等处看到它们……这是我们的编辑器工具栏:

image

自 2018 年以来,我们一直在使用 Font Awesome 5(原始公告),期间 Font Awesome 6 已发布。6.0 版本包含新图标、一些通用样式更新和重命名。

从今天起,Discourse 也将开始使用 6.0 版本!具体来说,是 6.6.0 版本。这不会带来巨大的视觉变化,但您会注意到一些不同之处:

image

此次升级涉及哪些内容?

此次升级涉及一系列重命名,以使内容更加一致。

为支持 Discourse 社区完成升级,更改将分多个阶段推出:


:white_check_mark: 今天 - Font Awesome 升级到 v6,图标将自动重新映射

:white_check_mark: 即将 - 将启用弃用消息,以帮助主题/插件作者更新其图标名称

:white_check_mark: 2025 年第一季度 - 为任何剩余的弃用启用管理员警告横幅

:white_check_mark: 2025 年 4 月 1 日 - 移除自动重新映射和管理员警告横幅

:white_check_mark: 2025 年 5 月 2 日 - 移除旧图标名称映射和错误级别日志记录


我看到一个缺失的图标,如何修复?

  1. 打开浏览器开发者工具,找到带有缺失图标的相关元素。

  2. 记下受影响图标的当前名称,并查找正确的图标名称进行更新。图标名称映射可在 discourse/lib/deprecated_icon_handler.rb at fbc2cfb6185c00950da8e915b1a32546e7020913 · discourse/discourse · GitHub 找到。

  3. 更新相关主题/插件所属的元素,或通知其开发者进行更新。

如果您需要这方面的帮助,请随时创建一个 Support 主题,或按常规方式联系您的托管提供商。

主题和插件作者需要了解什么?

Introducing Font Awesome 5 and SVG icons 中介绍的方法仍然可以用于添加新图标和自定义图标。

我们已移除旧名称的重新映射,如果您的主题/插件仍在使用旧名称,您将看到一些图标曾经存在的地方出现空白。

有很多新图标!

从 5.0 版本升级到 6.0 版本引入了数百个免费图标,总计近 500 个!

您可以在此处浏览完整列表,此列表按最新添加的排序——并且搜索功能非常方便:Search Icons & Find the Perfect Design | Font Awesome

39 个赞

这段代码还有用吗:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

这个需要修改吗:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>
2 个赞

太棒了!我终于可以用我想要的图标来表示一个分类了 :tada:

6 个赞

看起来这可能与 Making tags look like real world tags - #11 by HeyRR 相关……如果你使用像 content: "\\f02b"; 这样的 CSS,那么是的,你仍然需要这个。这是在使用独立于我们实现的图标字体(我们直接使用 SVG 文件)

这个不需要立即编辑,但根据重命名列表,你应该在未来 6 个月内将 share-alt 替换为 share-nodes,将 beer 替换为 beer-mug-empty(实心啤酒杯是一个专业图标……我猜它不是“免费如啤酒”)

6 个赞

也许吧。这是几年前有人多次建议过的事情。我从来没有真正理解为什么,但我可以复制粘贴😝 但这与在某个地方使用 Font Awesome 的能力有关,或者别的什么。

但如果我不能再喝啤酒了,我就要带领姆明军队发动叛乱🤣

3 个赞

目前 Meta 的盾牌图标缺失。

6 个赞

已修复 :tada:

7 个赞

谢谢,我不太清楚是否已完成或将进行升级到 6.0 版本?(升级我的网站后,我找不到“bluesky” :butterfly: 6.0 图标,所以我才问……)

1 个赞

更新站点后,您的图标将是 FA6,并由 Discourse 自动重新映射。

2 个赞

是的,这正是我所期望的,但这个图标无法显示(我在页眉图标链接组件中使用它)

1 个赞

我在 6.6.0 中找到了该图标

由于它不是 Discourse 中使用的图标,它是否在您的站点设置的 svg icon subset 中?

1 个赞

不,我正在使用此语法将其添加到组件的资源中:“fa-bluesky”,但这还不够。我将查看该 SVG 资源,我对它不太熟悉。

(更新),显然我们在谈论同一件事,是的,它已添加到资源中……

1 个赞

您可能需要使用 fab-bluesky,因为它属于品牌集。

5 个赞

谢谢,它在 SVG 资源和自定义标题链接编辑器中指定 fab-bluesky 有效,而我以前从未需要这样做。在自定义标题链接组件中,我从未指定前缀“fa”,对于 bluesky 图标,我需要指定“fab-bluesky”。最重要的是它有效!谢谢。

2 个赞

我升级了,图标也变了。最让我烦恼的是(我有点怕我的用户们——那些女士们很棒,但如果她们生气了……),关于表情符号会怎么样,但那是另一回事,对吧?总之,一切都很顺利。

4 个赞

看起来是一次很棒的升级!我喜欢更新的四舍五入功能。我以前不知道这是我想要的一个改动。

2 个赞

最重要的是,新版本使用了正确的 Fedora 徽标,而不是一个未经授权的近似徽标,这让我们的设计师们头疼不已。

11 个赞

9 篇帖子被拆分到一个新主题:升级后某些图标未显示

官方的 Category Icons 和 Tag Icons 主题组件是否会更新以使用新的 Font Awesome 6 名称?

我认为它们目前仍在使用 FA5。

3 个赞

这些主题组件使用了 Discourse 内置的图标系统,因此我认为它们不需要更新即可兼容 — 它们应该会自动使用新图标。

7 个赞