تغيير الأيقونات عالميًا

توثيق أدلة المطور
22

Yes, follow this guide: Replace Discourse's default SVG icons with custom icons in a theme

إعجابَين (2)
23

Bump, please. I have the same question.

Out of the box, discourse uses the link icon at the bottom of post as a “share” button (it’s more than the link, it offers social media sharing) yet the same icon is used in the editor to edit a link.

These really ought to be different; they are different functions. OR if anyone has a way to override the global change in the post editor, I’d appreciate it.

إعجابَين (2)
24

Recently changed the Like icon from the “heart” to " book-reader".

Had great success changing all of the Like icons, except the one in the notifications, drop-down list

Capture166

I’ve used the following header, adding all possible options I could think of:

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  // notifications 
        api.replaceIcon('notification.liked_2', 'book-reader');  // notifications 
        api.replaceIcon('notification.liked_many', 'book-reader');  // notifications 

    </script>

The heart has been replaced everywhere on the platform, except for the notification drop-down list…

Any thoughts?

إعجاب واحد (1)
25

Try to add also

api.replaceIcon('notification.liked_consolidated', 'book-reader');

إعجاب واحد (1)
26

Thanks for the response, Daniela!

Added it, but still no change. The heart still shows as the notification icon.

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  
        api.replaceIcon('notification.liked_2', 'book-reader');  
        api.replaceIcon('notification.liked_many', 'book-reader');  
        api.replaceIcon('notification.liked_consolidated', 'book-reader');  

    </script>

Other than this instance, the book-reader icon has replaced all heart icons everywhere.

Thought it might be an icon conflict, so I changed from “book-reader” to “pencil”, since I know notifications can use that icon. Didn’t work, still a heart.

Any thoughts?

27

I tried to replace the envelope icon with the inbox icon, but the changes are not applied to the icons inside the user menu panel. Do they have to be targeted in a specific way?

My snippet:

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("envelope", "inbox");
});
28

Hello @jrgong :waving_hand:

Here you can find the icon replacements what contains the notifications.

Add this line to your snippet:

api.replaceIcon("notification.private_message", "inbox");
إعجاب واحد (1)