Icônes de tags

:discourse2: Résumé Tag Icons permet d’ajouter une icône à côté de l’étiquette des tags.
:eyeglasses: Aperçu Aperçu sur Discourse Theme Creator
:hammer_and_wrench: Lien vers le dépôt https://github.com/discourse/discourse-tag-icons
:open_book: Nouveau sur les thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Fonctionnalités

Voici un exemple de l’apparence avec le style des tags défini sur la valeur par défaut (simple) :

Voici l’apparence avec le style des tags défini sur box :

Paramètres

Nom Description
liste des icônes de tags Entrez une configuration séparée par des virgules pour les tags, au format “slug-du-tag,icône,couleurIcône”. La couleur de l’icône est facultative.
icônes SVG Liste des icônes FontAwesome 6 utilisées dans ce composant de thème

:discourse2: Hébergé par nous ? Les composants de thème sont disponibles sur nos offres Standard, Business et Entreprise.

79 « J'aime »
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 « J'aime »

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 « J'aime »

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 « J'aime »

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

9 « J'aime »

Cela permet d’ajouter des icônes personnalisées à une balise, mais que faire si je souhaite modifier la couleur de la boîte de la balise ?

3 « J'aime »

Vous pouvez le faire avec CSS. Par exemple, le code ci-dessous définit la couleur du texte « theme-component » en rouge :

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

(Ceci est uniquement à titre illustratif ; vous devrez déterminer votre propre CSS.)

2 « J'aime »

Je vois, merci. Je dois simplement lister chaque balise que j’ai dans le CSS par son nom et spécifier la couleur. Ce serait bien si je pouvais le faire depuis le panneau d’administration, comme pour les composants de thème, en utilisant une liste séparée par des virgules et en fournissant le code hexadécimal, tout comme pour les icônes.

Y a-t-il un moyen de définir une couleur pour toutes les balises d’un groupe de balises via le CSS ?

4 « J'aime »

J’ai fini par obtenir quelque chose comme ça : image (L’icône de balise par défaut est toujours là)

Quelqu’un voit-il ce genre de résultat ?

Recherchez « style de balise » dans les paramètres de votre site et passez-le en mode simple, cela supprimera les puces grises.

Je vois, merci, mais j’aurai besoin des puces grises par défaut pour tous les autres tags. J’y suis arrivé en supprimant les puces pour un tag spécifique :

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

image

3 « J'aime »

Ça a l’air d’être un excellent ajustement. Une question pour demander conseil à l’auteur : j’envisage d’embellir mes balises banales, dont certaines servent à taguer des publications par langue (j’ai donc des balises « castellano », « deutsch », etc.), avec de petits drapeaux de pays. Faudrait-il télécharger un fichier .svg personnalisé comme décrit ci-dessus, ou existe-t-il des ensembles d’icônes préconfigurés ou peut-être des jeux d’émojis intégrés à Discourse qui pourraient être utilisés ?

2 « J'aime »

Un emoji aurait du sens pour les drapeaux des pays, mais ce composant n’utilise pas d’emojis ; il utilise des icônes provenant d’un ensemble d’icônes comme Font Awesome.

Vous pouvez essayer d’ajouter l’emoji directement dans l’étiquette de la balise. Je l’ai testé localement, et le problème est que les étiquettes ne peuvent pas contenir d’espaces. Voici un exemple :

Si le tiret vous convient, c’est la meilleure solution.

4 « J'aime »

Oh wow, c’est en fait plutôt sympa. À part le tiret :slight_smile: mais je pourrais probablement m’en accommoder. Ça pourrait même valoir le coup d’essayer un tag qui n’est qu’un drapeau emoji…

Oui, un simple emoji, c’est cool… mais vous ne pourrez pas le trouver facilement via la recherche dans le menu déroulant des balises (lors de la publication).

2 « J'aime »

D’accord, encore une demi-bête question : comment faire fonctionner l’emoji comme vous l’avez fait ci-dessus avec le français ? J’ai essayé de créer un tag :sweden:-svenska mais cela ne se traduit pas par le drapeau suédois.

Vous devez utiliser un symbole emoji (sur mobile, par exemple, vous passeriez au clavier emoji).

3 « J'aime »

Ohhhh, je pensais que les emojis étaient dans Discourse. D’accord, il faut que je passe sur mobile alors. Je pensais pouvoir les utiliser d’une manière ou d’une autre. Ça a marché, merci !

3 « J'aime »

Si j’ai bien compris, il n’existe pas de moyen simple de découvrir le groupe auquel appartient une étiquette au sein du rendu des étiquettes ?

Ce serait formidable. J’utilisais auparavant une approche CSS personnalisée que j’ai abandonnée au profit de ce composant de thème avec une icône de repli pour toutes les étiquettes non définies (du moins avant l’ajout du support des groupes d’étiquettes), et c’est ce point précis qui me manque.

Étant donné que discourse-category-icons prend cela en charge, je suppose que le rendu remplacé par replaceCategoryLinkRenderer est utilisé par le menu déroulant des catégories, tandis que le rendu remplacé par replaceTagRenderer ne l’est PAS par le menu déroulant des étiquettes, n’est-ce pas ? Il faudrait donc peut-être une modification du cœur du système ? Le menu déroulant des étiquettes dans l’éditeur utilise le rendu remplacé, avec des icônes.

2 « J'aime »