Change icons globally

[Discourse]

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 Find Icons with the Perfect Look & Feel | Font Awesome, e.g. external-link-alt

4. Customize and add the code in your admin > customize > themes > edit code -> JS tab

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

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

export default apiInitializer((api) => {
  api.replaceIcon("link", "external-link-tab");
});

5. 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:

api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");

but on the badge page the icon is still “heart”:

so to change it on that page we add:

api.replaceIcon("heart", "thumbs-up");

Another example:

api.replaceIcon("d-watching", "eye");

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.

[thegurjyot (Gurjyot Singh)]

Your post does help in changing icons globally but how to change the share icon in posts only? I do not want to change the link icon in the editor but, only in the posts. I checked the other posts in the forum but none of those work in the current build of Discourse, thus I am asking it here.

[Pad_Pors]

thanks for the clear guide. a small point:

is it possible to change d-watching to fas fa-eye and d-tracking to far fa-eye together?

if yes, how would one add the fas icon to the svg; as I tried adding fa-eye and this header:

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

but the watching icon is not working.

---

also I was checking other icons such as bells, and I see even when I add bells to the svg icon subset it’s not loaded:

is there anything else I should do in order to be able to use bells?

[pmusaraj (Penar Musaraj)]

@Pad_Pors

even when I add bells to the svg icon subset it’s not loaded

Bells is a Pro icon, so it can’t be included, our default FA5 implementation only covers the free icons.

The solid eye icon is a bit of a special case: the FontAwesome 4 eye icon was moved to the regular bundle, so in Discourse we have a matcher for it that converts ‘eye’ to ‘far-eye’. Unfortunately, this stops you from using the solid ‘eye’ icon in Discourse, because Discourse will redirect eye to far-eye. If you absolutely must use that icon, you can copy the svg into a custom icon that you can rename to something of your liking, and add that to a theme or plugin.

[Pad_Pors]

thanks for the complete information , meanwhile I’ve tried several other icons, e.g. user-shield.

here is the header:
<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('d-watching', 'fa-user-shield');
</script>

and I added fa-user-shield to the svg icon subset, but it still shows empty icon.

[pmusaraj (Penar Musaraj)]

Try without the “fa-” prefix for user-shield (both in the JS code and the site setting).

[Pad_Pors]

@pmusaraj

user-shield

still empty (tried with flag for easier snapshot):

[pmusaraj (Penar Musaraj)]

That works locally for me. Did you refresh the page after making these changes?

[Pad_Pors]

yes, refreshed with F5 and ctrl+R just to be sure!

is there anyway to look for possible errors?

[pmusaraj (Penar Musaraj)]

If you are familiar with the rails console, I would try logging in to the console and running SvgSprite.expire_cache and then refreshing the page to see if that does it.

[GuilhermeBac]

How to change the solid (fas fa-bookmark) to regular version (far fa-bookmark)?

https://fontawesome.com/icons/bookmark?style=regular

[P16]

@dax Is there a way to change the default heart icon to an emoji icon?

[pmusaraj (Penar Musaraj)]

Currently, no, you can only replace svg icons with other svg icons, not emojis.

[porterbayne]

Возможно ли использовать собственные добавляемые SVG-иконки вместо только иконок FA?

[pmusaraj (Penar Musaraj)]

Да, подробности см. по адресу Introducing Font Awesome 5 and SVG icons.

[porterbayne]

Спасибо! Я также нашел Замена SVG-икон по умолчанию Discourse на пользовательские иконки в теме

В итоге я встроил SVG-спрайт напрямую в файл Header, так как загрузка и переименование, как описано в статье, у меня не сработали (хотя, возможно, это ошибка с моей стороны).

Итак, мой Header выглядит так:

<svg width="0" height="0" class="hidden" style="display: none;">
    <symbol id="myicon-search" ..... </symbol>  
    <!-- все мои символы здесь... -->
</svg>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('search', 'myicon-search'); 
</script>

И это легко поддерживать.

Я использую генератор SVG-спрайтов на https://svgsprit.es, чтобы убедиться, что формат правильный.

[bekircem]

Можно ли использовать иконки Fabric от Microsoft с этим методом?

[pmusaraj (Penar Musaraj)]

Да, вы должны быть в состоянии это сделать. Я не вижу официального распространения SVG-спрайтов этих иконок, но, согласно Where can I find the svg files of the icons? · Issue #1008 · OfficeDev/office-ui-fabric-core · GitHub, вы можете извлечь SVG самостоятельно, по одному, используя их имена.

[tomwrench]

@thegurjyot

Ваш пост действительно помогает изменить иконки глобально, но как изменить иконку «поделиться» только в сообщениях? Я не хочу менять иконку ссылки в редакторе, а только в сообщениях. Я просмотрел другие посты на форуме, но ни один из них не работает в текущей сборке Discourse, поэтому задаю вопрос здесь.

Я пытаюсь сделать то же самое. Мне удалось успешно изменить иконку «поделиться» в сообщениях, но, похоже, это также меняет иконку ссылки в редакторе. Есть ли идеи, как изменить иконку только в сообщениях?

[ghgoodreau (Hunter)]

Есть ли способ глобально заменить иконку Font Awesome на SVG-иконку, загруженную в разделе загрузки темы? Я работаю над сайтом и хочу заменить иконку Font Awesome, которая отображается при решении темы (с использованием плагина discourse-solved), на логотип моего сайта. Мне сложно подойти к этому через код самого плагина, и я хотел узнать, работает ли метод заголовка для таких задач.