在哪里可以找到 Discourse 使用的图标列表？

支持
1

In the sample “new like icon” repo, we see:

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'thumbs-up');
      api.replaceIcon('d-unliked', 'thumbs-o-up');
      api.replaceIcon('notification.liked', 'thumbs-o-up');
      api.replaceIcon('notification.liked_2', 'thumbs-o-up');
      api.replaceIcon('notification.liked_many', 'thumbs-o-up');
      api.replaceIcon('heart', 'thumbs-up');
</script>

I don’t know that I’d have guessed to replace notification.liked_many_2

Where could we see a list of all the icons in use by discourse?

2 个赞
2

这应该是您在寻找的内容：

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-common/addon/lib/icon-library.js

11 个赞
3

I was trying to replace an icon over in this topic: How to replace an icon using CSS

The icon in question was .d-icon-lock, but I don’t see it in the list above. Where would I find the icon, so I know what to target in the api.replaceIcon above?

4

In this case you would just use the FA icon name:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('lock', 'times-circle');
</script>
5 个赞
5

I see. I guess I was asking for a list of all icons… perhaps searching the source for {d-icon ' is what I’m looking for.

6

我有同样的问题，而且上面的链接无法使用。我搜索并浏览了这个主题的许多内容：Introducing Font Awesome 5 and SVG icons
但同样，我没有看到任何列表来了解某个图标是否属于核心集。在论坛上也无法找到其他相关的搜索结果。

1 个赞
7

Discourse 使用免费的 Font Awesome 图标。所有可用的图标均可在此处找到：https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=regular,solid&m=free。您可能需要在站点设置中将某些图标添加到“SVG 图标子集”中。您可以通过在 URL 后添加 /styleguide/atoms/icons 来查看站点上有哪些图标。如果未显示，请检查站点设置中是否已启用“styleguide”。

如果您想访问专业版图标，需要安装插件：https://meta.discourse.org/t/fontawesome-pro-icons/150871。

5 个赞
8

https://meta.discourse.org/styleguide/atoms/icons

您的论坛也有此功能。您可能需要启用该插件。

5 个赞
9

感谢 @ondrej 和 @pfaffman！我熟悉 Font Awesome 的使用，也知道自己可能需要添加一些新的图标，这就是为什么我想了解其中包含了哪些内容。Meta 和 Styleguide 插件的链接都非常有帮助。我仍然在某些情况下（但奇怪的是并非所有情况）对如何添加新图标感到有些困惑，不过我会就此单独创建一个主题/回复。:wink:

2 个赞