Sí, lo siento, debería haber actualizado mi publicación. He descubierto que con Font Awesome hay que añadirlos a la configuración.
Y recientemente aprendí, como dijiste, que necesito crear un archivo SVG sprite para subir a icons-sprites.
Aún estoy aprendiendo muchas cosas nuevas. Agradezco la ayuda para seguir ampliando mis conocimientos. Gracias.
Los iconos de categoría en nuestro sitio se veían genial, hasta que inicié sesión hoy. Parece que no hay relleno entre el icono y el título de la categoría al mostrarse. ¿Alguien más tiene este problema?
Por ejemplo…
Yo también lo veo. Estoy seguro de que Penar lo solucionará, pero por ahora esto lo arreglará
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
Gracias a ambos, esto debería estar solucionado ahora.
¿Es posible usar otros iconos distintos a los de Font Awesome? Mi foro es sobre viajes y necesito iconos muy específicos que no existen allí. ¿Podemos usar, por ejemplo, un archivo de icono PNG normal, como hacemos con las categorías? ¡Gracias!
Puedes usar iconos personalizados si los conviertes a SVG y los agregas a tu tema mediante un sprite SVG. Consulta la sección “Crear un spritesheet SVG” de esta guía sobre cómo agregar iconos personalizados a tu sitio, los cuales luego podrás usar en este componente (y en todo tu sitio de Discourse).
¡Funciona genial!
¿Es posible que lo ajuste para que el icono aparezca después del título de la categoría?
Pregunta adicional: ¿es posible agregar un texto de ayuda (tooltip) o texto alternativo?
(Fondo: Estoy ocultando el icono del candado y, en su lugar, uso este componente para agregar un icono a las pocas categorías públicas que tengo. Me gustaría que los usuarios tuvieran una forma de saber qué representa el símbolo.)
Tengo problemas al usar mis iconos personalizados. No encontré nada que me indicara si debía usar un prefijo o no. Esto es lo que estoy haciendo.
Aquí está el SVG que estoy usando: https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
Como puedes ver, no logro ver el icono de Arch en absoluto.
icons-sprite:
my-icon en mi hoja de cálculo, escribo esto:Resultado:
@Canapin Eso no funciona. Aquí está mi archivo de sprite: Archivo de Sprite
El ID de imagen que estoy intentando usar: Aquí
Esto es lo que estoy haciendo:
¿Estoy haciendo algo mal?
En tu spritesheet, intenta reemplazar:
<svg width="0" height="0" class="hidden">
Por:
<svg xmlns="http://www.w3.org/2000/svg">
También, no es necesario agregar el ID del icono en los campos de configuración de iconos SVG; todos tus iconos personalizados ya están disponibles desde tu spritesheet cargado.
Creo que la configuración de iconos SVG está pensada para cargar iconos adicionales de Font Awesome, ya que Discourse solo carga un conjunto definido y pequeño por defecto.
@Canapin ¡Gracias! Funcionó a la perfección. Sin embargo, tengo una pregunta más: ¿este archivo de sprites es exclusivo de un componente en particular o puedo acceder a los iconos con sus identificadores en cualquier lugar?
Cuando subes un archivo a un tema usado o a un componente de tema, puedes utilizarlo en cualquier otro, así que supongo que puedes usar tus IDs de icono en cualquier lugar.
¡Hola Penar! ¿Esto soportará el nuevo complemento Font Awesome Pro? ¿O hay alguna forma de usarlo ya que me esté perdiendo? ¡Gracias!
Debería funcionar con el complemento Pro, sí. ¿Solo ves SVGs no Pro para los iconos de categoría?
Sí, después de eliminar mi sprite, solo se muestran los no profesionales. Además, los no profesionales no siguen la configuración fa_icon_style para iconos claros, etc.
Hmm, esto funciona bien en mi sitio local.
Ese es el icono de engranaje, usando el plugin con el estilo “Light” seleccionado. Compáralo con el estilo regular a continuación.
Pero quizás no estoy revisando lo correcto… avísame si hay algún icono específico que no se esté mostrando correctamente para ti.
Aquí tienes un ejemplo con el tema configurado en modo claro. Críticas de imágenes tiene el icono comment-alt-edit y no se muestra (es un icono de la versión Pro), mientras que Galería de imágenes tiene el icono images, que no es de la versión Pro, pero muestra la versión regular en lugar de la clara. Discusiones muestra la versión sólida de comments, y Comunidad muestra la versión clara de users, como se esperaba.
Intenté cambiar uno de ellos a cog y funciona correctamente con la versión clara apropiada. ¡Hay mucha extrañeza ocurriendo aquí!
¿Lo probaste con far-comment-alt-edit?
Vale, ya lo entiendo. La clave es tener far- en la lista de iconos de categoría, no en iconos svg. Así que para los iconos ligeros tengo que cambiarlos todos a fal- y esto no sigue la configuración del sitio para estilo de icono fa, ¿correcto?
