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