备用图标

文档 开发者指南
,
1

默认情况下，Discourse 捆绑了出色的 FontAwesome 库中的图标。但是，有很多可免费使用的图标库。本主题是替代图标集的存放地。它列出了一些您可以立即尝试的主题组件，但也描述了如何贡献以使 Discourse 支持其他图标集。

替代图标集

如果您有兴趣尝试不同的图标集，这里有一个您可以尝试的主题组件列表：

（请参阅如何安装主题或主题组件以获取将这些存储库之一添加到您的 Discourse 站点的帮助。）

这些组件仍在开发中。您可以使用它们，但请注意，核心中的并非每个图标都有合适的替代品。（不过，我们欢迎贡献，请参阅下文。）

一些截图：

image
image1824×1158 159 KB

Feather icons（使用 WCAG Dark 颜色方案）

image
image1926×1282 163 KB

Heroicons（使用 WCAG Light 颜色方案）

image
image1732×1256 165 KB

Unicons（使用 Grey Amber 颜色方案）

image
image1726×1256 163 KB

Phosphor Duotone（使用 WCAG Light 颜色方案）

贡献

主题开发者和设计师，此部分是为您准备的。

上面列出的组件是使用 discourse-alt-icons 实用程序存储库生成的，该存储库简化了用其他开源图标集中的图标替换 Discourse 核心中的图标的过程。该存储库的核心是一个构建脚本，它根据图标名称映射的 JSON 文件生成一个主题组件。

欢迎并鼓励贡献。 Discourse 使用 FontAwesome 的许多图标，从其他图标集中找到匹配项是一项有趣的任务，但非常耗时。如果您想提供帮助，可以克隆 discourse-alt-icons 存储库，并按照自述文件中的步骤添加尚未匹配的图标。

支持其他图标集

请使用下面的回复来提议添加对另一个图标集的支持。或者，更好的是，只需做一点工作，您就可以向 discourse-alt-icons 存储库发送一个拉取请求。请注意，我们只考虑具有非常宽松许可证的图标集（即必须允许修改、分发、私人使用）。

此文档是版本控制的 - 在 github 上 建议更改。

30 个赞
Harmonizing Discourse icons and emojis
2

If anyone is looking to contribute an icon set, but doesn’t have one in mind:

MIT licensed, designed by the folks over at tailwindlabs.com

4 个赞
3

Hope to help, here are some icons you can use

4

Nice suggestion, I added this and updated the OP with a screenshot. It doesn’t have a lot of icons, for example, it has no icons for the composer toolbar, but the icons it does have are quite nice. Thanks!

2 个赞
5

Does this mean that Google Fonts is out of the question?

6

Google’s Material Icons license is permissive enough. But their repo is gigantic, and it might be time-consuming to find the path to each icon.

1 个赞
7

Yes, but once it’s done, you won’t have to do it again. :slight_smile:

1 个赞
8

请问我们是否可以获得 Phosphor Regular 图标？

2 个赞
9

只需稍加努力，您（或任何人）就可以从双色存储库创建一个 Phosphorus Regular 存储库。如果我们有存储库，我很乐意在此列表进行审查并将其包含在内。

2 个赞
10

那将是惊人的。我们应该默认在 /admin 中有一个图标集列表，因为 FontAwesome 有点丑。:ok_man:

11

丑陋是品味问题。但如今 Font Awesome 提供的免费图标数量确实有限。

另一方面——有多少图标真的好看 :joy:

13

看起来当我们加载其中一组图标时，缺失的图标没有被默认的 Font Awesome 图标替换，所以它只是空白的，不太好用…… :thinking:

我喜欢 feather 集合，但它缺少许多有用的图标。

我在仓库上做了一个 PR。一些更改远非完美，但一个不好的图标总比没有图标好 :smiling_face_with_tear:

以下是所有新增的图标（糟糕的风格编码页面，过时的“替代”列）
https://canapin.dev/discourse/feather-icons/

主要和不太好的更改：

image
信用卡在形状上最接近 address-card。其他替代品可以是合上的或打开的书……

image
最好的选择是准星（crosshair）。一个简单的笔形状相当相似，但它是一个笔，而且已经被用于编辑了。

image
没有接近的。在我看来，最合适的图标是 CPU 图标。我在 PR 中弄错了，使用了 Zap 图标，所以我将发送另一个 PR 来解决这个问题。

2 个赞
14

我刚注意到 Lucide 图标：

这是 Feather 的一个分支，它是最新的。Feather 只有 287 个图标，而 Lucide 有 1701 个（当然，它们拥有了大多数甚至全部缺失的图标）。

这两个图标集都受 MIT 许可。

所以我想在这种情况下应该放弃对 Feather 的支持，并替换为 Lucide。

我的拉取请求现在看起来有点没有意义了 :lolsob:

也许我可以尝试为这个图标集创建一个仓库，如果得到团队的批准……

3 个赞
15

不相关，但当访问 https://canapin.dev 时，滚动到底部并点击 Virtualmin 的论坛，它竟然是 Discourse :discourse:！

1 个赞
16

我已经为 Discourse 制作了几乎全部的 Lucide 图标集，但我在哪里可以找到 Discourse 核心使用的图标的完整列表，这样我就不会遗漏任何一个？

这个模板 discourse-alt-icons/mappings/template.json at main · discourse/discourse-alt-icons · GitHub 缺少了一些。一个例子是调色板

17

可能会有所帮助。

插件和组件可以添加额外的图标。我不确定如何在其中找到流行的图标。查看那些被 #included-in-core 的插件可能是有意义的。所以搜索类似 Repository search results · GitHub 的内容可能会起作用。

1 个赞
18

这是仓库：

欢迎使其成为官方的。

Font-Awesome

image
image2560×1271 258 KB

Lucide

image
image2560×1271 265 KB

3 个赞
19

可以在设置中添加其他图标吗？看起来缺少报纸、麦克风和游戏手柄图标。

20

好的。我还需要在编辑器中修复字体大小图标。

编辑：我可能误解了，我不确定我们是否可以在组件外部替换新图标集中的 discourse 图标 :thinking:

1 个赞
21

哎呀，

要获取 Discourse 中包含的图标的完整列表，请前往您的 Discourse 实例中的 /styleguide。

来自 GitHub - discourse/discourse-alt-icons

我猜这就是人工智能对我的影响，我甚至都不再阅读手册了 :person_facepalming:

我在 /styleguide 或 discourse/lib/svg_sprite.rb at main · discourse/discourse · GitHub 中找不到它们。它们在 Discourse 中哪里被使用？

2 个赞