我无法更改通知图标

开发
1

大家好，
我想更换这些图标

image
image388×543 32.1 KB

我是这样操作的

image
image1371×377 67 KB

并在页眉中添加了代码

image
image675×130 7.69 KB

但图标并未更新
其他图标可以正常显示
请帮我解决这个问题

2

你好，Mikhail，

请试试这个：slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('notification.granted_badge', 'oo-medal-badges');
</script>

你可以在这里找到这些替换项：arrow_down:

3

是的，成功了。非常感谢！

image
image481×429 26.2 KB

4

我在哪里可以看到它们的样子？

5

你可以通过使用“检查元素”轻松识别它。

例如：证书图标通知

  1. 使用检查元素功能查找图标名称

Screenshot 2021-08-11 at 16.43.04
Screenshot 2021-08-11 at 16.43.041276×746 253 KB

  1. 在 icon-library.js 中查找相同的图标

然后，你可以将图标替换为你想要的任何其他图标。:slightly_smiling_face:

6

感谢您的回复。
我已经解决了问题。我以为有一个包含标准 Discourse 图标的列表。

7

我可以将其添加以供将来参考。我遵循了 Replace Discourse's default SVG icons with custom icons in a theme - #19 上的说明，但我一开始没有意识到同一个图标可以被引用不同的方式。在应用程序本身，“/styleguide/atoms/icons”下列出了所有图标及其引用方式，因此在我的 header.html 文件中，我现在有 5 个对信封图标的引用：

    api.replaceIcon('envelope', 'fgx-air-mail');
    api.replaceIcon('far-envelope', 'fgx-air-mail');
    api.replaceIcon('notification.private_message', 'fgx-air-mail');
    api.replaceIcon('notification.read_private_message', 'fgx-air-mail');
    api.replaceIcon('notification.invited_to_private_message', 'fgx-air-mail');