Cambiar iconos globalmente

[Discourse]

Este es un método sencillo para cambiar un icono de Discourse globalmente.

1. Haz clic derecho en el icono que deseas cambiar y selecciona “Inspeccionar elemento” o “Inspeccionar” (depende del navegador)

2. Encuentra el nombre del icono
   

   

3. Busca un nuevo icono aquí Find Icons with the Perfect Look & Feel | Font Awesome, por ejemplo external-link-alt

4. Personaliza y añade el código en la pestaña admin > customize > themes > edit code -> JS

// {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. Los iconos que no se utilizan por defecto en Discourse deben añadirse en la configuración del sitio svg icon subset y luego forzar la actualización del navegador para ver los cambios aplicados.
   Resultado:
   
   Todos los iconos de “enlace” se reemplazarán por “external-link-tab”.
   Si un icono se utiliza para varios elementos en otras páginas, como insignias, el icono también se reemplazará allí.

---

Excepciones

Ten en cuenta que ya existe un componente de tema que te permite cambiar el icono de Me gusta. Estoy usando este caso como ejemplo.

El icono “corazón”, utilizado para dar “Me gusta”, está codificado con otros nombres ('d-liked' y 'd-unliked') y debe tratarse de manera diferente a otros iconos, por lo que para cambiar el icono por el icono :

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

pero en la página de insignias el icono sigue siendo “corazón”:

así que para cambiarlo en esa página añadimos:

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

Otro ejemplo:

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

cambia el icono de seguimiento:

[details=“Ver aquí otras excepciones que cubren el estado de seguimiento, expandir/colapsar, notificaciones y, por supuesto, los “me gusta”.”]

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)
[/details]

---

¡No dudes en crear otros componentes de tema y compartirlos en nuestra categoría Theme component!

---

Este documento está controlado por versiones: sugiere cambios en 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]

Is it possible to change to custom SVG icons we add, rather than just FA icons?

[pmusaraj (Penar Musaraj)]

Yes, see Introducing Font Awesome 5 and SVG icons for details.

[porterbayne]

Thank you! I also found Replace Discourse’s default SVG icons with custom icons in a theme

I ended up embedding the SVG sprite directly into the Header file, as uploading it and naming it as that article says to do did not work for me (could be operator error, of course).

So my Header is:

<svg width="0" height="0" class="hidden" style="display: none;">
    <symbol id="myicon-search" ..... </symbol>  
    <!-- all of my symbols here... -->
</svg>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('search', 'myicon-search'); 
</script>

And that is easy to manage.

I use the SVG sprite generator at https://svgsprit.es to make sure the format is correct.

[bekircem]

Can we use Microsoft’s Fabric Icons with this method?

[pmusaraj (Penar Musaraj)]

You should be able to, yes. I don’t see an official SVG sprite distribution of those icons, but according to Where can I find the svg files of the icons? · Issue #1008 · OfficeDev/office-ui-fabric-core · GitHub you can extract SVGs yourself, one by one, using their names.

[tomwrench]

@thegurjyot

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.

I’m trying to do the same thing. I’ve changed the ‘share’ icon successfully in posts but it appears it also changes the ‘link’ icon in the editor. Any ideas how to change just the posts icon?

[ghgoodreau (Hunter)]

Is there a way to change a fontawesome icon globally to an SVG icon uploaded in the theme upload section? I am working on a site and would like to specifically change the fontawesome icon for when a topic is solved (using the discourse-solved plugin) to my site’s logo. I am having a hard time approaching this via the actual plugin code and I was wondering if this header method works for something like that.