Change icons globally using the APIs

themes

(Daniela) #1

This is an easy way to change a Discourse icon globally.

  1. Right click on the icon you want to change and select “Inspect element” or “Inspect” (depends on the browser)
  2. Find the icon name
  3. Search a new icon here Font Awesome Icons, e.g. external-link
  4. Customize and add the code in your admin > customize > themes > Header tab
    <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('link', 'external-link');
    </script>

Result:
image

All the “link” icons will be replaced by “external-link”.
Note that if an icon is used for multiple elements in other pages, such as badges, the icon will also be replaced there.


Exceptions

Note that there is already a theme component that allow you to change the Like icon. I’m using this case as example

The “heart” icon, used to give Like, is hardcoded with other names ('d-liked' and 'd-unliked') and should be treated differently than other icons, so to change the :heart: icon with :+1: icon:

    <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-liked', 'thumbs-up');
        api.replaceIcon('d-unliked', 'thumbs-o-up');
    </script>

like
firefox_2018-04-24_18-37-02
but on the badge page the icon is still “heart”:
firefox_2018-04-24_18-38-15
so to change it on that page we add:

    <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-liked', 'thumbs-up');
        api.replaceIcon('d-unliked', 'thumbs-up');
        api.replaceIcon('heart', 'thumbs-up');
    </script>

firefox_2018-04-24_18-47-50

Another example:

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

changes the watching icon:
watching-original watching

See here other exceptions that cover the tracking status, expand/collapse, notifications and likes of course.
const REPLACEMENTS = {
  'd-tracking': 'circle',
  'd-muted': 'times-circle',
  'd-regular': 'circle-o',
  'd-watching': 'exclamation-circle',
  'd-watching-first': 'dot-circle-o',
  'd-drop-expanded': 'caret-down',
  'd-drop-collapsed': 'caret-right',
  'd-unliked': 'heart-o',
  'd-liked': 'heart',
  'notification.mentioned': "at",
  'notification.group_mentioned': "at",
  'notification.quoted': "quote-right",
  'notification.replied': "reply",
  'notification.posted': "reply",
  'notification.edited': "pencil",
  'notification.liked': "heart",
  'notification.liked_2': "heart",
  'notification.liked_many': "heart",
  'notification.private_message': "envelope-o",
  'notification.invited_to_private_message': "envelope-o",
  'notification.invited_to_topic': "hand-o-right",
  'notification.invitee_accepted': "user",
  'notification.moved_post': "sign-out",
  'notification.linked': "link",
  'notification.granted_badge': "certificate",
  'notification.topic_reminder': "hand-o-right",
  'notification.watching_first_post': "dot-circle-o",
  'notification.group_message_summary': "group"
};

Ref: discourse/icon-library.js.es6 at master · discourse/discourse · GitHub


Feel free to create other themes component and share it in our #theme category!


How can change share link icon
Alternatives to lock icon for categories
Can you change (or remove) hamburger menu icon?
How to change notification level icons?
Howto: Change lock icon for restricted categories
Change sharing icon on posts