Icono de elemento de navegación en Discourse / Emoji

:information_source: Resumen Añadir icono / emoji antes del elemento de navegación
:hammer_and_wrench: Repositorio GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en Temas de Discourse? Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente de tema

Hola :wave:

Con este componente de tema puedes añadir un icono o emoji antes de los elementos de navegación. El componente de tema se basa en Discourse Easy 'SVG Icon' and 'Emoji' in CSS.

nav item prefix

Esta configuración puede manejar también los iconos y emojis.
La regla que debes seguir es:

Icono

Si quieres añadir un icono antes de un elemento de navegación:
icon:nav-item:icon-set:icon-name:icon-color

Primero debes definir el tipo que es icon si quieres añadir un icono antes del elemento de navegación.

  • nav-item: latest, hot, new, unread, categories etc…
  • icon-set: brands, regular, solid
  • icon-color: currentColor, HEX o variable de color

Por ejemplo:
icon:latest:solid:rocket:currentColor
icon:top:regular:star:var(--gold)
icon:unseen:solid:compass:#228C22

icon


Emoji

Si quieres añadir un emoji antes de un elemento de navegación:
emoji:nav-item:emoji-set:emoji-name:filter

Primero debes definir el tipo que es emoji si quieres añadir un emoji antes del elemento de navegación.

  • nav-item: latest, hot, new, unread, categories etc…
  • emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
  • filter: Hace que el emoji sea de color negro en modo claro y blanco en modo oscuro. Si el emoji pasa el ratón por encima o está activo, se revelará con una transición. (opcional)
    emoji-filter

Por ejemplo:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

Navegación de escritorio

emoji

Navegación móvil

8 Me gusta

Muy bueno Don, ¿hay alguna posibilidad de que esto funcione con FontAwesome Pro? Yo uso iconos ligeros…

1 me gusta

Sí, creo que eso es posible, pero desafortunadamente no tengo acceso al conjunto de iconos pro. Funciona con SVG de iconos, así que si tienes acceso a esto, debería funcionar. Requiere modificar un poco el componente y añadir estos SVG. Después de eso, puedes usarlo con la configuración. Y también es importante cuál es el uso legal de los SVG de iconos pro en el sitio web, de lo que no estoy seguro.

2 Me gusta

¿Por qué no hay un discurso de seguimiento :rofl: ? ¡Cada tema que creas, quiero una notificación!, como dice el término… ¡LO ROMPES!

1 me gusta

Después de actualizar Discourse, el terminal móvil no muestra el icono, lo que causa confusión. ¿Hay alguien en la misma situación que yo?

Parece la vista de escritorio en tu captura de pantalla (a juzgar por el icono de hamburguesa en la esquina izquierda), pero el componente me funciona en el móvil. :thinking:

Estoy de acuerdo con lo que dice @sheng_hualuo sobre la nueva navegación (menú desplegable); no aparece.

Oh, ya veo que también está en el menú desplegable. :thinking:

Sí, lamento que este componente temático y otros que modifiqué en la barra de navegación tengan que actualizarse desde este cambio DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub. Estaré pensando en una solución. Podemos apuntar fácilmente a los elementos de navegación en el modal, pero el seleccionado no tiene una clase específica, desafortunadamente, y creo que tenemos que descartar las navegaciones de escritorio de los componentes.

4 Me gusta

Hola :wave:

He realizado una actualización en este componente.

  1. elimina la versión de navegación de escritorio en móvil
  2. añade compatibilidad con la nueva navegación móvil

Lamentablemente, no podemos añadir aquí, ya que esta sección no tiene una clase específica para el elemento de navegación.
Screenshot 2024-08-19 at 19.52.18

2 Me gusta

Muchas gracias por la corrección, pero lamento mucho que se haya eliminado la función de la versión de escritorio, ya que queda genial con mi sitio web.

2 Me gusta