This is an easy way to change a Discourse icon globally.
-
Right click on the icon you want to change and select “Inspect element” or “Inspect” (depends on the browser)
-
Find the icon name
-
Search a new icon here Find Icons with the Perfect Look & Feel | Font Awesome, e.g. external-link-alt
-
Customize and add the code in your
admin > customize > themes > Header
tab
<script type="text/discourse-plugin" version="0.11">
api.replaceIcon('link', 'external-link-tab');
</script>
- Icons that are not used by default from Discourse must be added in the site setting
svg icon subset
then force refresh your browser to see the changes applied.
Result:
All the “link” icons will be replaced by “external-link-tab”.
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 icon with
icon:
<script type="text/discourse-plugin" version="0.11">
api.replaceIcon('d-liked', 'thumbs-up');
api.replaceIcon('d-unliked', 'thumbs-o-up');
</script>
but on the badge page the icon is still “heart”:
so to change it on that page we add:
<script type="text/discourse-plugin" version="0.11">
api.replaceIcon('d-liked', 'thumbs-up');
api.replaceIcon('d-unliked', 'thumbs-up');
api.replaceIcon('heart', 'thumbs-up');
</script>
Another example:
<script type="text/discourse-plugin" version="0.11">
api.replaceIcon('d-watching', 'eye');
</script>
changes the watching icon:
See here other exceptions that cover the tracking status, expand/collapse, notifications and likes of course.
const REPLACEMENTS = {
"d-tracking": "bell",
"d-muted": "discourse-bell-slash",
"d-regular": "far-bell",
"d-watching": "discourse-bell-exclamation",
"d-watching-first": "discourse-bell-one",
"d-drop-expanded": "caret-down",
"d-drop-collapsed": "caret-right",
"d-unliked": "far-heart",
"d-liked": "heart",
"d-post-share": "link",
"d-topic-share": "link",
"notification.mentioned": "at",
"notification.group_mentioned": "users",
"notification.quoted": "quote-right",
"notification.replied": "reply",
"notification.posted": "reply",
"notification.edited": "pencil-alt",
"notification.bookmark_reminder": "discourse-bookmark-clock",
"notification.liked": "heart",
"notification.liked_2": "heart",
"notification.liked_many": "heart",
"notification.liked_consolidated": "heart",
"notification.private_message": "far-envelope",
"notification.invited_to_private_message": "far-envelope",
"notification.invited_to_topic": "hand-point-right",
"notification.invitee_accepted": "user",
"notification.moved_post": "sign-out-alt",
"notification.linked": "link",
"notification.granted_badge": "certificate",
"notification.topic_reminder": "far-clock",
"notification.watching_first_post": "discourse-bell-one",
"notification.group_message_summary": "users",
"notification.post_approved": "check",
"notification.membership_request_accepted": "user-plus",
"notification.membership_request_consolidated": "users",
"notification.reaction": "bell",
"notification.votes_released": "plus",
"notification.chat_quoted": "quote-right",
};
Ref: discourse/icon-library.js at main · discourse/discourse (github.com)
Feel free to create other themes component and share it in our theme-component category!
This document is version controlled - suggest changes on github.
Last edited by @JammyDodger 2024-05-25T09:43:40Z
Check document
Perform check on document: