Este componente incluye una configuración de tema que te permite agregar tantos enlaces como desees, determinar sus iconos y decidir en qué dispositivos se mostrarán.
Nombre
Descripción
enlaces del encabezado
Lista de enlaces con las siguientes propiedades: título, icono, URL, vista y destino
agregar espacio en blanco
Si está marcado, esto agregará algo de espacio en blanco entre los iconos predeterminados del encabezado de Discourse y los iconos personalizados agregados mediante este componente
Iconos SVG
Incluir clases de iconos de FontAwesome 6 para cada icono utilizado en la lista.
Los iconos pueden ser cualquier nombre de icono de FontAwesome 6 (gratuito) sin las partes fa-, fab-, fas- o far-, o una URL a una imagen.
Si el icono que deseas usar no aparece, agrégalo a la configuración svg_icons en el componente. Si agregas nuevos iconos, deben tener los prefijos de FontAwesome 6 como fab, far y fas.
Tengo un problema similar al que mencionaron algunas personas arriba: el icono no se muestra, pero aún puedo hacer clic en el botón. Modifiqué la configuración del icono para que diga (por ejemplo) “fab-facebook-f” en lugar de solo “facebook-f”. Para Twitter y mi otro sitio web no tengo problemas, pero para Facebook y LinkedIn, sigue sin funcionar.
Ya logré entender Facebook, pero todavía no consigo dominar LinkedIn. Además, ¿hay alguna forma de crear un icono personalizado? ¿Podría subir el logotipo de mi empresa y usarlo como icono?
La captura de pantalla de la configuración parece corresponder al componente Custom Header Links - #84, que está diseñado para mostrar enlaces de texto y no iconos.
Entiendo que la forma en que se nombran los componentes puede resultar confusa:
https://github.com/discourse/discourse-header-links - enlaces de iconos (este tema)
https://github.com/discourse/discourse-custom-header-links - enlaces de texto (Custom Header Links)
Quizás deberías añadir “icon” al nombre de este componente, @Johani.
Ah, esto lo resolvió, efectivamente. Sí, es muy confuso. ¡Renombrar sería genial!
EDIT: La actualización reciente también pareció cambiar sigilosamente el nombre de la clase de Discord para incluir ‘fab-’ en medio (por ejemplo, si quieres cambiar el color de los iconos; lo cual @OP convertiría en una función nativa excelente; fue un poco difícil de detectar).
pero dado que ese icono no está incluido en el conjunto predeterminado de iconos que usa Discourse, también necesitarás agregarlo a la otra configuración del componente.
Claro, hay una sección en este tema sobre cómo agregar iconos personalizados.
Una vez que lo configures, podrás usar cualquier icono personalizado que agregues en este componente del tema. Por favor, échale un vistazo allí y avísame si encuentras algún problema.
He realizado ese cambio junto con otras mejoras de implementación aquí
La nueva actualización agrega clases con prefijos únicos a cada enlace según el título que uses. Por ejemplo, si usas
Gracias por tu ayuda. Intenté usar “fab-linkedin” en ambas categorías: “Enlaces del encabezado” y “Iconos SVG”. Como se ve en la imagen, por alguna razón sigue sin funcionar.
Como eres cliente, entré a tu sitio, revisé el problema y lo solucioné por ti. Actualicé el componente del tema y configuré los ajustes correctos para los iconos; ahora deberían funcionar todos.
Una pregunta más / solicitud: inicialmente estos enlaces se abrían en una pestaña separada, pero ahora se abren en la misma pestaña. La configuración ya está establecida en “blank”, ¿de qué otra manera puedo cambiar esto?
Efectivamente. Por error, omití el atributo target en los cambios recientes.
No es necesario que hagas nada. Corregí el componente y lo actualicé en tu sitio. Así que todo debería estar listo ahora. Gracias por reportar el problema
Los iconos personalizados están a la derecha de los botones de inicio de sesión y registro, y creo que quedarían mejor a la izquierda, como suele ser habitual.
Puedo hacer que algunos iconos de la versión 4.7.0 de Font Awesome Icons funcionen simplemente escribiendo un nombre (por ejemplo, car) en la parte correcta de “Enlaces del encabezado”. Algunos iconos no se muestran (por ejemplo, fa-comments-o). Algunos no requieren que use “Iconos SVG” (por ejemplo, home) y otros sí (por ejemplo, car).
Ninguno de los iconos de la versión 5 que he probado desde Find Icons with the Perfect Look & Feel | Font Awesome ha funcionado. He colocado el nombre con el prefijo fa- en “Enlaces del encabezado” y en “Iconos SVG” sin ningún resultado. Sin embargo, los iconos fab-facebook (etc.), que venían por defecto, sí funcionan.
¿Qué estoy haciendo mal?
Edición: He editado el primer párrafo para mayor precisión.
Muchas gracias por esto, @Johani. Funciona a la perfección y me ofrece una solución «estética» para enlazar «de vuelta al sitio» (en mi caso).
Sin embargo, he encontrado un problema, ya que también estoy utilizando el componente Menú hamburguesa en el lado izquierdo en móviles, lo cual termina rompiendo todo en esa parte del .d-header.
¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Empresarial y de Empresa.
