我无法更改通知图标

开发
1

Hi, everybody
I want to change these icons

image
image388×543 32.1 KB

I did it like this

image
image1371×377 67 KB

And I wrote it in the Header
image

But the icon has not changed
It works with other icons
Please help me solve this problem

2 个赞
2

Hi Mikhail,

Please try this one :slightly_smiling_face:

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

You can find these replacements here :arrow_down:

4 个赞
3

Yes, it worked. Thank you very much
image

1 个赞
4

And where can I see what they look like?

5

You can easily identify it by using inspect elements.

For example.: the certificate icon notification

  1. Find the icon name with inspect elements

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

  1. Find the same icon in the icon-library js

Then you can replace the icon with any other icon you want. :slightly_smiling_face:

1 个赞
6

Thanks for your reply
I figured it out. I thought there was some sort of list with standard Discourse icons

1 个赞
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');
2 个赞