这是一种全局更改 Discourse 图标的简便方法。
-
右键单击要更改的图标，然后选择“检查元素”或“检查”（具体取决于浏览器）。
-
找到图标名称
-
在此处搜索新图标 Find Icons with the Perfect Look & Feel | Font Awesome external-link-alt
-
在
admin > customize > themes > edit code -> JS选项卡中自定义并添加代码
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("link", "external-link-tab");
});
- 如果 Discourse 默认未使用某些图标，则必须在站点设置
svg icon subset中添加它们，然后强制刷新浏览器以查看更改。
结果：
所有“link”图标都将替换为“external-link-tab”。
如果某个图标在其他页面的多个元素中使用（例如徽章），则该图标也会在这些地方被替换。
例外情况
_请注意，已经有一个主题组件允许您更改“点赞”图标。我在这里以这种情况为例。
用于“点赞”的“heart”图标是硬编码的，并带有其他名称（'d-liked' 和 'd-unliked'），因此其处理方式应与其他图标不同。要将 
图标更改为 
图标：
api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");
但在徽章页面上，图标仍然是“heart”：
因此，要在该页面上更改它，请添加：
api.replaceIcon("heart", "thumbs-up");
另一个示例：
api.replaceIcon("d-watching", "eye");
更改了“关注”图标：
在此处查看其他涵盖跟踪状态、展开/折叠、通知和点赞的例外情况。
const REPLACEMENTS = {
"d-tracking": "bell",
"d-muted": "discourse-bell-slash",
"d-regular": "far-bell",
"d-watching": "discourse-bell-exclamation",
"d-watching-first": "discourse-bell-one",
"d-drop-expanded": "caret-down",
"d-drop-collapsed": "caret-right",
"d-unliked": "far-heart",
"d-liked": "heart",
"d-post-share": "link",
"d-topic-share": "link",
"notification.mentioned": "at",
"notification.group_mentioned": "users",
"notification.quoted": "quote-right",
"notification.replied": "reply",
"notification.posted": "reply",
"notification.edited": "pencil-alt",
"notification.bookmark_reminder": "discourse-bookmark-clock",
"notification.liked": "heart",
"notification.liked_2": "heart",
"notification.liked_many": "heart",
"notification.liked_consolidated": "heart",
"notification.private_message": "far-envelope",
"notification.invited_to_private_message": "far-envelope",
"notification.invited_to_topic": "hand-point-right",
"notification.invitee_accepted": "user",
"notification.moved_post": "sign-out-alt",
"notification.linked": "link",
"notification.granted_badge": "certificate",
"notification.topic_reminder": "far-clock",
"notification.watching_first_post": "discourse-bell-one",
"notification.group_message_summary": "users",
"notification.post_approved": "check",
"notification.membership_request_accepted": "user-plus",
"notification.membership_request_consolidated": "users",
"notification.reaction": "bell",
"notification.votes_released": "plus",
"notification.chat_quoted": "quote-right",
};
参考：discourse/icon-library.js at main · discourse/discourse (github.com)
欢迎创建其他主题组件，并在我们的 #theme-component 类别中分享！
本文档受版本控制 - 请在 github 上建议更改。
