全局更改图标

文档 开发者指南
22

是的，请按照本指南操作：Replace Discourse's default SVG icons with custom icons in a theme

2 个赞
23

顶一下，我也有同样的问题。

Discourse 开箱即用，帖子底部的链接图标被用作“分享”按钮（它不仅仅是链接，还提供社交媒体分享功能），但编辑器中编辑链接时使用的却是同一个图标。

这两个功能完全不同，图标理应有所区别；或者，如果有人知道如何覆盖帖子编辑器中的全局设置，我将不胜感激。

2 个赞
24

最近将“点赞”图标从“心形”改为了“阅读者”。

在更改所有“点赞”图标方面取得了很大成功，但通知下拉列表中的那个图标除外。

Capture166

我使用了以下脚本头，并尝试了所有能想到的选项：

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  // 通知
        api.replaceIcon('notification.liked_2', 'book-reader');  // 通知
        api.replaceIcon('notification.liked_many', 'book-reader');  // 通知

    </script>

心形图标在平台各处都已被替换，唯独通知下拉列表中的图标没有变化……

有什么建议吗？

1 个赞
25

也尝试添加以下代码：

api.replaceIcon('notification.liked_consolidated', 'book-reader');

1 个赞
26

感谢回复，Daniela！

已添加，但仍未见变化。通知图标仍然显示为心形。

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  
        api.replaceIcon('notification.liked_2', 'book-reader');  
        api.replaceIcon('notification.liked_many', 'book-reader');  
        api.replaceIcon('notification.liked_consolidated', 'book-reader');  

    </script>

除了这个实例外，其他所有地方的心形图标都已成功替换为 book-reader 图标。

我原以为是图标冲突，所以将“book-reader”改成了“pencil”，因为我知道通知可以使用该图标。但仍未奏效，显示的仍然是心形。

有什么建议吗？

27

我尝试将 envelope 图标替换为 inbox 图标，但更改未应用于用户菜单面板内的图标。它们是否需要以特定方式定位？

我的代码片段：

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("envelope", "inbox");
});
28

您好 @jrgong :waving_hand:

您可以在此处找到包含通知的图标替换项。

将此行添加到您的代码段：

api.replaceIcon("notification.private_message", "inbox");
1 个赞