Enlaces de encabezado personalizados (iconos)

Oh my - that did the trick, thank you so much!
I tried “building” just in the theme component (didn’t work) and “fas-building” in both places (didn’t work) but it didn’t cross my mind to try the plain version in both fields.

I still would suggest to make this differene between fa(s) and fab/far more clear in the component description.

2 Me gusta

Hello.
Thanks for the great plugin.

I would be grateful if you could provide one support.

I have a Login Required setting on my Discourse.
When I visit a site with this setting, I am naturally asked to create an account or log in, and the header shows an icon that I created with this plugin.

image
Need account or login page(in Japanese)

If that’s all there is to it, there’s no problem, but if you click on them, you will be able to open the linked page without logging in.
(The link is to a plugin that I created myself, and the Path is a path directly under the site root, such as /test_path. Even with this path, if you specify the URL directly, etc., you will be asked to create an account or log in. Only if you go through the header icon of this plugin, the page will be displayed without login).

The best solution is to not show the icon in the first place, but at the very least, you need to be able to click on the icon to see the page that asks you to log in.

I would really appreciate it if you could help me with a solution. Thank you very much.

1 me gusta

Hey @Johani. It looks like this needs to be updated for the new way theme variables work. I see this error in the admin panel:

Error: Undefined variable: "$add-whitespace". on line 14 of common.scss >> @if $add_whitespace == "true" { ----^
3 Me gusta

Hello,

I’m linking to a limited access page, where I need to pass in some variables to the url. Would it be possible to get some system variables like username, userid, mail etc?

1 me gusta

I am looking for the same thing. I want to post the logged-in user’s username to a remote server when the header icon is clicked. I understand that I can get the username via javascript, but I am not sure how I can do so this via a header icon:

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

Thanks!

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?