Iconos de etiquetas

:discourse2: Resumen Tag Icons permite que las etiquetas tengan un icono junto a la etiqueta.
:eyeglasses: Vista previa Vista previa en Discourse Theme Creator
:hammer_and_wrench: Enlace al repositorio https://github.com/discourse/discourse-tag-icons
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de los temas de Discourse

Instalar este componente del tema

Características

Aquí hay un ejemplo de cómo se vería, con el estilo de etiqueta establecido en el predeterminado (simple):

Así es como se ve con el estilo de etiqueta establecido en box:

Configuración

Nombre Descripción
lista de iconos de etiquetas Ingresa la configuración separada por comas para las etiquetas, en el formato “slug-etiqueta,icono,colorIcono”. El color del icono es opcional.
iconos svg Lista de iconos de FontAwesome 6 utilizados en este componente del tema

:discourse2: ¿Alojado por nosotros? Los componentes del tema están disponibles para usar en nuestros planes Estándar, Empresarial y Corporativo.

79 Me gusta
Is anyone else using tags on a Discourse forum in a big way?
Events Plugin :calendar:
Discourse Coloring Tag
Category Icons
How to test themes or theme components?
Discourse更新后,主页排版混乱
How to make a category-list-like front page for a tag-oriented site?
Request or idea for a component: topic title or topic flair
Admin guide to tags in Discourse
Customizing your site with existing theme components
Category Icons
Setup Continuous Integration using GitHub Actions
Tag change color for element in a Tag group
Add color and subcategory styling to category and chat mentions
Setting tag style to 'box'?
MD Topic List component
Remove Dashes from Tag Names
Links in tag descriptions aren’t escaped when using Tag Icons
Good approach for data sensitivity markings?
We're upgrading our icons to Font Awesome 6!
(Superseded) Add a custom fontawesome icon and color to your tag
How to create a tag "🎥"?
How to create a tag "🎥"?
Does anyone know how to add emojis to tags?
Renaming Tags: Consequences
Workarounds to support alternate tag structures
Difficult contrast of tags and categories when the text colour is white
Tag Banners
Some of my tags have # and some don't
The Horizon theme does not display tags on topic lists
Default tag icon
Tag Icons + Tag Banners + Right Sidebar Blocks
Add backgroundColor option for Tag Icons theme-component
For newly created labels, assign a random style
Trying to use css to insert png icons in tag boxes
Workarounds to support alternate tag structures
Uncaught TypeError: Cannot read property 'apply' of undefined
A picker for font awesome icons
api.onPageChange not working with endless scroll
Volunteer Activities - a simple setup for non-hierarchical collaboration
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Include an emoji when creating a new topic?
MD Topic List Mobile component
Javascript error + content missing after update 2.6.0.beta3
Emoji in tag - thoughts and experiences
A playful approach to category moderation

Does this also work with custom svg?

2 Me gusta

Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.

7 Me gusta

Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

3 Me gusta

Could the icon be added to the dropdown menu as well?

9 Me gusta

This allows one to add custom icons to tag, but what if I wanted to change the color of the box of the tag?

3 Me gusta

You can do that with CSS, for example, the code below will set the “theme-component” text color to red:

.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}

(This is just for illustrative purposes only, you’ll need to figure out your own CSS.)

2 Me gusta

I see thanks. I just have to list every tag I have in the CSS by name and specify the color. Would be nice though if I could do this from the admin panel like with the theme components using a comma separated list and providing the hex code just like for the icons.

Is there a way I can set a color for all tags in a tag group via CSS?

4 Me gusta

Al final, obtuve algo como esto: image (El icono de etiqueta predeterminado sigue aquí)

¿Alguien ve este tipo de resultado?

Busca “estilo de etiqueta” en la configuración de tu sitio y cámbialo a simple; eso eliminará las viñetas grises.

Entiendo, gracias, pero necesitaré los viñetas grises predeterminadas para todas las demás etiquetas. Logré esto eliminando esas viñetas para una etiqueta específica:

a[data-tag-name="test1"]::before {
    display:none!important;
}

image

3 Me gusta

Parece un ajuste fantástico. Una pregunta para pedir consejo al autor: Estoy pensando en mejorar mis etiquetas aburridas, algunas de las cuales uso para etiquetar publicaciones por idioma (así que tengo etiquetas como “castellano”, “deutsch”, etc.), con pequeñas banderas de países. ¿Sería subir un archivo .svg personalizado como se describe arriba la forma correcta, o existen conjuntos de iconos preconfigurados o quizás conjuntos de emojis integrados en Discourse que se podrían utilizar?

2 Me gusta

Un emoji tendría sentido para las banderas de los países, pero este componente no utiliza emojis, sino iconos de un conjunto como Font Awesome.

Puedes probar agregando el emoji directamente en la etiqueta del tag. Lo intenté localmente, y lo complicado es que las etiquetas no pueden tener espacios. Un ejemplo:

Si te parece bien el guion, esa es la mejor opción.

4 Me gusta

¡Vaya, eso es realmente bastante interesante. Menos el guion :slight_smile: pero probablemente podría vivir con ello. Incluso podría valer la pena probar una etiqueta que sea solo un emoji de bandera…

Sí, solo un emoji está bien… pero no podrás encontrarlo fácilmente mediante una búsqueda en el menú desplegable de etiquetas (al publicar).

2 Me gusta

Ok, solo una pregunta más medio tonta: ¿cómo hago para que el emoji funcione como lo hiciste arriba con el francés? Intenté crear una etiqueta ":sweden:-svenska" pero no se traduce a la bandera de Suecia.

Necesitas usar un símbolo de emoji (en un dispositivo móvil, por ejemplo, cambiarías al teclado de emojis).

3 Me gusta

¡Ohhh, pensé que los emojis estaban en Discourse! Vale, necesito cambiar a un móvil entonces. Pensé que de alguna manera podría usarlos. ¡Funcionó, gracias!

3 Me gusta

Si entendí bien, ¿no hay una forma sencilla de descubrir a qué grupo pertenece una etiqueta dentro del renderizador de etiquetas?

Esto sería excelente. Antes utilizaba un enfoque de CSS personalizado, pero lo abandoné en favor de este componente del tema con un icono de respaldo para todas las etiquetas sin configurar (al menos antes del soporte para grupos de etiquetas), y es justo lo que echo de menos.

Considerando que discourse-category-icons soporta esto, supongo que el renderizador que reemplaza replaceCategoryLinkRenderer es el utilizado por el menú desplegable de categorías, mientras que el renderizador que reemplaza replaceTagRenderer NO es el usado por el menú desplegable de etiquetas, ¿correcto? Entonces, ¿esto quizás requeriría un cambio en el núcleo? El menú desplegable de etiquetas en el compositor sí utiliza el renderizador reemplazado, con iconos.

2 Me gusta