全局更改图标

[Discourse]

\n这是一个在 Discourse 中全局更改图标的简单方法。\n\n1. 右键单击要更改的图标，然后选择“检查元素”或“检查”（取决于浏览器）\n\n2. 找到图标名称\n

\n3. 在此处搜索新图标 Find Icons with the Perfect Look & Feel | Font Awesome 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\n"

[thegurjyot (Gurjyot Singh)]

Your post does help in changing icons globally but how to change the share icon in posts only? I do not want to change the link icon in the editor but, only in the posts. I checked the other posts in the forum but none of those work in the current build of Discourse, thus I am asking it here.

[Pad_Pors]

thanks for the clear guide. a small point:

is it possible to change d-watching to fas fa-eye and d-tracking to far fa-eye together?

if yes, how would one add the fas icon to the svg; as I tried adding fa-eye and this header:

<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('d-watching', 'fa-eye');
api.replaceIcon('d-tracking', 'eye');
</script>

but the watching icon is not working.

---

also I was checking other icons such as bells, and I see even when I add bells to the svg icon subset it’s not loaded:

is there anything else I should do in order to be able to use bells?

[pmusaraj (Penar Musaraj)]

@Pad_Pors

even when I add bells to the svg icon subset it’s not loaded

Bells is a Pro icon, so it can’t be included, our default FA5 implementation only covers the free icons.

The solid eye icon is a bit of a special case: the FontAwesome 4 eye icon was moved to the regular bundle, so in Discourse we have a matcher for it that converts ‘eye’ to ‘far-eye’. Unfortunately, this stops you from using the solid ‘eye’ icon in Discourse, because Discourse will redirect eye to far-eye. If you absolutely must use that icon, you can copy the svg into a custom icon that you can rename to something of your liking, and add that to a theme or plugin.

[Pad_Pors]

thanks for the complete information , meanwhile I’ve tried several other icons, e.g. user-shield.

here is the header:
<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('d-watching', 'fa-user-shield');
</script>

and I added fa-user-shield to the svg icon subset, but it still shows empty icon.

[pmusaraj (Penar Musaraj)]

Try without the “fa-” prefix for user-shield (both in the JS code and the site setting).

[Pad_Pors]

@pmusaraj

user-shield

still empty (tried with flag for easier snapshot):

[pmusaraj (Penar Musaraj)]

That works locally for me. Did you refresh the page after making these changes?

[Pad_Pors]

yes, refreshed with F5 and ctrl+R just to be sure!

is there anyway to look for possible errors?

[pmusaraj (Penar Musaraj)]

If you are familiar with the rails console, I would try logging in to the console and running SvgSprite.expire_cache and then refreshing the page to see if that does it.

[GuilhermeBac]

How to change the solid (fas fa-bookmark) to regular version (far fa-bookmark)?

https://fontawesome.com/icons/bookmark?style=regular

[P16]

@dax Is there a way to change the default heart icon to an emoji icon?

[pmusaraj (Penar Musaraj)]

Currently, no, you can only replace svg icons with other svg icons, not emojis.

[porterbayne]

我们能否使用自定义的 SVG 图标，而不仅仅是 Font Awesome 图标？

[pmusaraj (Penar Musaraj)]

是的，详情请见 https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643。

[porterbayne]

谢谢！我还找到了这篇帖子：在主题中用自定义图标替换 Discourse 的默认 SVG 图标

最终，我直接将 SVG 精灵嵌入到 Header 文件中，因为按照那篇文章所述上传并重命名对我无效（当然，也可能是我操作有误）。

所以我的 Header 是这样的：

<svg width="0" height="0" class="hidden" style="display: none;">
    <symbol id="myicon-search" ..... </symbol>  
    <!-- 我所有的符号都在这里... -->
</svg>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('search', 'myicon-search'); 
</script>

这样管理起来很方便。

我使用 https://svgsprit.es 上的 SVG 精灵生成器来确保格式正确。

[bekircem]

我们可以使用微软的 Fabric 图标 配合此方法吗？

[pmusaraj (Penar Musaraj)]

是的，您应该可以这样做。我没有看到这些图标的官方 SVG 精灵分发版本，但根据 https://github.com/OfficeDev/office-ui-fabric-core/issues/1008，您可以使用它们的名称逐个自行提取 SVG 文件。

[tomwrench]

@thegurjyot

您的帖子确实有助于全局更改图标，但如何仅更改帖子中的分享图标？我不想更改编辑器中的链接图标，只希望在帖子中更改。我查看了论坛中的其他帖子，但它们在当前的 Discourse 版本中都不起作用，因此我在这里提问。

我也在尝试做同样的事情。我已经成功更改了帖子中的“分享”图标，但发现它同时也更改了编辑器中的“链接”图标。有什么办法可以只更改帖子的图标吗？

[ghgoodreau (Hunter)]

有没有办法将 FontAwesome 图标全局替换为在主题上传部分上传的 SVG 图标？我正在开发一个网站，希望将 discourse-solved 插件中标题已解决时显示的 FontAwesome 图标替换为我网站的标志。我很难直接通过插件代码来实现这一修改，想知道通过头部（header）方法是否可行。