Cambiar iconos globalmente

[Discourse]

Esta es una forma sencilla de cambiar un icono de Discourse de manera global.

1. Haz clic derecho en el icono que deseas cambiar y selecciona “Inspect element” o “Inspect” (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 agrega 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 usan de forma predeterminada en Discourse deben agregarse en la configuración del sitio svg icon subset y luego forzar una actualización del navegador para ver los cambios aplicados.
   Resultado:
   
   Todos los iconos “link” serán reemplazados por “external-link-tab”.
   Si un icono se usa para múltiples elementos en otras páginas, como insignias, el icono también se reemplazará allí.

---

Excepciones

Nota que ya existe un componente de tema que te permite cambiar el icono de Like. Estoy usando este caso como ejemplo

El icono “heart”, utilizado para dar “Like”, 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 “heart”:

por lo que para cambiarlo en esa página agregamos:

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

Otro ejemplo:

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

cambia el icono de seguimiento:

Mira aquí otras excepciones que cubren el estado de seguimiento, expandir/colapsar, notificaciones y likes, por supuesto.

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)

---

Siéntete libre de crear otros componentes de tema y compartirlos en nuestra categoría Customization > 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)?

Bookmark Filled Icon (Classic Solid) — Free SVG Download | Font Awesome

[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]

¿Es posible cambiar a iconos SVG personalizados que añadamos, en lugar de solo iconos de FA?

[pmusaraj (Penar Musaraj)]

Sí, consulta Introducing Font Awesome 5 and SVG icons para más detalles.

[porterbayne]

¡Gracias! También encontré Reemplazar los iconos SVG predeterminados de Discourse por iconos personalizados en un tema

Al final, incrusté el sprite SVG directamente en el archivo Header, ya que subirlo y nombrarlo como indica el artículo no funcionó para mí (podría ser un error mío, por supuesto).

Así que mi Header es:

<svg width="0" height="0" class="hidden" style="display: none;">
    <symbol id="myicon-search" ..... </symbol>  
    <!-- todos mis símbolos aquí... -->
</svg>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('search', 'myicon-search'); 
</script>

Y eso es fácil de gestionar.

Uso el generador de sprites SVG en https://svgsprit.es para asegurarme de que el formato sea correcto.

[bekircem]

¿Podemos usar los iconos de Fabric de Microsoft con este método?

[pmusaraj (Penar Musaraj)]

Sí, deberías poder hacerlo. No veo una distribución oficial de sprites SVG de esos iconos, pero según Where can I find the svg files of the icons? · Issue #1008 · OfficeDev/office-ui-fabric-core · GitHub, puedes extraer los SVGs tú mismo, uno por uno, utilizando sus nombres.

[tomwrench]

@thegurjyot

Tu publicación sí ayuda a cambiar los iconos a nivel global, pero ¿cómo se cambia el icono de compartir solo en las publicaciones? No quiero cambiar el icono de enlace en el editor, solo en las publicaciones. Revisé otras publicaciones en el foro, pero ninguna funciona en la versión actual de Discourse, por eso lo pregunto aquí.

Estoy intentando hacer lo mismo. He cambiado el icono de ‘compartir’ con éxito en las publicaciones, pero parece que también cambia el icono de ‘enlace’ en el editor. ¿Alguna idea sobre cómo cambiar solo el icono de las publicaciones?

[ghgoodreau (Hunter)]

¿Hay alguna manera de cambiar globalmente un icono de Font Awesome por un icono SVG subido en la sección de carga del tema? Estoy trabajando en un sitio y me gustaría cambiar específicamente el icono de Font Awesome que aparece cuando un tema está resuelto (usando el plugin discourse-solved) por el logotipo de mi sitio. Estoy teniendo dificultades para abordarlo directamente en el código del plugin y me preguntaba si este método del encabezado podría funcionar para algo así.