Enlaces de encabezado personalizados (iconos)

¡Ay, qué bien! Eso fue lo que necesitaba, ¡muchas gracias!
Probé con “building” solo en el componente del tema (no funcionó) y con “fas-building” en ambos lugares (tampoco funcionó), pero no se me ocurrió probar la versión simple en ambos campos.

Aún así, sugeriría aclarar más esta diferencia entre fa(s) y fab/far en la descripción del componente.

2 Me gusta

Hola.
Gracias por el excelente complemento.

Agradecería mucho si pudieras brindarme un soporte.

Tengo configurada la opción “Requiere inicio de sesión” en mi Discourse.
Cuando visito un sitio con esta configuración, naturalmente se me solicita crear una cuenta o iniciar sesión, y en la cabecera aparece un icono que creé con este complemento.


Página de “Se requiere cuenta” o “Iniciar sesión” (en japonés)

Si eso fuera todo, no habría problema, pero al hacer clic en ellos, se puede acceder a la página vinculada sin necesidad de iniciar sesión.
(El enlace es a un complemento que creé yo mismo, y la ruta es un camino directamente bajo la raíz del sitio, como /test_path. Incluso con esta ruta, si especificas la URL directamente, se te pedirá crear una cuenta o iniciar sesión. Solo si accedes a través del icono de la cabecera de este complemento, la página se muestra sin necesidad de iniciar sesión).

La mejor solución sería no mostrar el icono desde el principio, pero al menos debería ser posible hacer clic en él para ver la página que solicita iniciar sesión.

Agradecería mucho si pudieras ayudarme con una solución. Muchas gracias.

1 me gusta

Hola @Johani. Parece que esto necesita actualizarse para el nuevo funcionamiento de las variables de tema. Veo este error en el panel de administración:

Error: Variable no definida: "$add-whitespace". en la línea 14 de common.scss >> @if $add_whitespace == "true" { ----^
3 Me gusta

Hola,

Estoy enlazando a una página de acceso restringido, donde necesito pasar algunas variables a la URL. ¿Sería posible obtener algunas variables del sistema como nombre de usuario, ID de usuario, correo, etc.?

1 me gusta

Busco lo mismo. Quiero enviar el nombre de usuario del usuario conectado a un servidor remoto al hacer clic en el icono del encabezado. Entiendo que puedo obtener el nombre de usuario mediante JavaScript, pero no estoy seguro de cómo hacerlo a través de un icono del encabezado:

<script type="text/discourse-plugin" version="0.8">
const username = api.getCurrentUser().username;
</script>

¡Gracias!

1 me gusta

Solo una advertencia, he notado un error en las instrucciones de Configuración del tema.

En la parte superior dice que el orden es título, icono, URL, vista, destino.

Pero en la parte inferior dice que el orden es título, icono, vista, URL, destino

El de arriba es el correcto, en que la URL va antes de la vista.

Ver abajo la captura de pantalla:

3 Me gusta

Acabo de hacer un PR para esto:

5 Me gusta

¡Gracias! Supongo que algún día aprenderé cómo y tendré el coraje de hacer una PR :smiley:

3 Me gusta

¿Hay alguna forma de indicar la posición del icono? Estoy usando un icono personalizado pero tengo el chat y otro icono de componente temático en el mismo encabezado y quiero colocar el icono del encabezado personalizado al lado del icono de búsqueda.

¡Hola a todos!

¡Gracias por el increíble componente temático! Aunque me he encontrado con un pequeño problema: algunos iconos funcionan bien, por ejemplo fa-rocket, pero otros no aparecen, por ejemplo fa-rocketchat, a pesar de que creo que tengo todas las clases de iconos necesarias instaladas. ¿Alguna idea de qué está causando esto? Realmente lo agradecería :slight_smile:

Además: ¿Cómo puedo obtener iconos de Font Awesome regulares en lugar de los sólidos? Intenté incluir far-iconname y fa-regular, pero eso no parece funcionar…

Probablemente debido a esto

Para la primera parte de tu pregunta. Puede que me equivoque, pero intenta añadir el icono de rocket chat a tu svg icon subset en la configuración del sitio.

1 me gusta

Lamentablemente, esto no resuelve el problema para mí.

El enlace del encabezado es:

Rocket.Chat,rocket,https://chat.domain.de,vdo,blank

En Iconos SVG en la configuración del componente Temático y Subconjunto de iconos SVG en la configuración principal de Discourse, he añadido fa-rocketchat y fa-brands como se detalla en la descripción de iconos de Font Awesome. Es compatible desde la versión 5.0.0 de FA, así que no puede ser eso…

¿Alguien tiene alguna idea y podría ayudarme? :slight_smile:

Necesitas:

  1. Añadir fab-rocketchat a svg icon subset.
  2. Cambiar Header links a Rocket.Chat,fab-rocketchat,https://chat.domain.de,vdo,blank.

Las instrucciones son confusas pero, mirándolas en retrospectiva, probablemente no sean inexactas:

La parte difícil es que tienes que convertir fab fa-rocketchat (en el sitio web de Font Awesome) a fab-rocketchat (en Discourse).

2 Me gusta

¿Hay alguna forma de añadir iconos SVG que subo a mi sitio? (Sin usar los de la web de Font Awesome)

¡Me estoy devanando los sesos con algo que no sé cómo resolver!

Uso el icono de “headset” y puedo usarlo normalmente

rocket | Font Awesome

pero cuando quiero usar el icono de “light headser” no puedo usarlo en absoluto

rocket | Font Awesome

Ya lo he intentado con ‘fab-’ ‘fas-’ o ‘far-’ lo he intentado sin ellos, ya he puesto el nombre en la parte SVG, lo he intentado todo, pero no puedo usarlo

[image]
lo mismo con el icono de google play store, no puedo usarlo y de ninguna manera

rocket | Font Awesome

¿por qué sucede esto?

Es posible que la versión clara sea un icono “pro”:

Para usar el estilo claro de “headset”, necesitarás una suscripción a un plan de nivel Pro o una licencia Pro perpetua que incluya la versión específica de Font Awesome en la que se lanzó este icono (o estilo).

1 me gusta

Me encantaría saber eso también. Quiero incluir un icono de Letterboxd (en algún lugar de la web, ya se han hecho y propuesto a fontawaseome pero no aceptados)

Puedes añadir tus propios iconos SVG con un tema:

2 Me gusta

¿Cómo pongo los iconos en la parte inferior del sitio (en modo móvil) que aparezcan iguales para todos?

Por ejemplo: el botón de la línea de tiempo aparece en la misma posición para todos los diferentes modelos de teléfonos móviles y sistemas móviles.

Ahora, cuando uso CSS para dejar el menú de botones del encabezado en la parte inferior, en algunos teléfonos móviles aparecen en la posición correcta, en otros la posición aparece un poco hacia arriba, en otros un poco hacia un lado, ¿por qué sucede esto?

una duda más, ¿hay alguna forma de colocar un icono que, al hacer clic en él, abra otras opciones con otros iconos, como en el ejemplo a continuación?