Icone dei tag

:discourse2: Riepilogo Tag Icons consente di aggiungere un’icona accanto all’etichetta del tag.
:eyeglasses: Anteprima Anteprima su Discourse Theme Creator
:hammer_and_wrench: Link al Repository https://github.com/discourse/discourse-tag-icons
:open_book: Nuovo a Discourse Themes? Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Funzionalità

Ecco un esempio di come apparirebbe, con lo stile del tag impostato su predefinito (semplice):

Ecco come appare con lo stile del tag impostato su box:

Impostazioni

Nome Descrizione
elenco icone tag Inserisci la configurazione delimitata da virgole per i tag, nel formato “slug-del-tag,icona,coloreIcona”. Il colore dell’icona è facoltativo.
icone svg Elenco delle icone FontAwesome 6 utilizzate in questo componente del tema

:discourse2: Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Standard, Business e Enterprise.

79 Mi Piace
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 Mi Piace

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 Mi Piace

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 Mi Piace

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

9 Mi Piace

Questo permette di aggiungere icone personalizzate al tag, ma cosa succede se volessi cambiare il colore del riquadro del tag?

3 Mi Piace

Puoi farlo con il CSS; ad esempio, il codice seguente imposta il colore del testo “theme-component” su rosso:

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

(Questo è solo a scopo illustrativo: dovrai trovare il tuo CSS.)

2 Mi Piace

Vedo, grazie. Devo semplicemente elencare ogni tag presente nel CSS per nome e specificare il colore. Sarebbe comunque comodo poter farlo dal pannello di amministrazione, come per i componenti del tema, utilizzando un elenco separato da virgole e fornendo il codice esadecimale, proprio come per le icone.

Esiste un modo per impostare un colore per tutti i tag di un gruppo tramite CSS?

4 Mi Piace

Alla fine sono finito con qualcosa del genere: image (L’icona predefinita del tag è ancora qui)

Qualcuno vede questo tipo di risultato?

Cerca “stile tag” nelle impostazioni del tuo sito e impostalo su semplice: questo rimuoverà i punti grigi.

Capisco, grazie, ma avrò bisogno dei punti grigi predefiniti per tutti gli altri tag. Ci sono riuscito rimuovendo quei punti per un tag specifico:

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

image

3 Mi Piace

Sembra un ottimo miglioramento. Una domanda per un consiglio all’autore: sto pensando di abbellire i miei tag poco appariscenti, alcuni dei quali uso per etichettare i post per lingua (quindi ho tag come “castellano”, “deutsch”, ecc.), con piccole bandiere dei paesi. Caricare un file .svg personalizzato come descritto sopra sarebbe la strada da seguire, oppure esistono set di icone preconfigurati o forse set di emoji integrati in Discourse che potrebbero essere utilizzati?

2 Mi Piace

Un’emoji avrebbe senso per le bandiere dei paesi, ma questo componente non utilizza emoji; utilizza icone da un set di icone come Font Awesome.

Puoi provare ad aggiungere l’emoji direttamente nell’etichetta del tag. L’ho provato in locale, e la cosa complicata è che i tag non possono contenere spazi. Un esempio:

Se sei d’accordo con il trattino, questa è la strada da seguire.

4 Mi Piace

Wow, è davvero carino. Meno il trattino :slight_smile: ma potrei anche accettarlo. Potrebbe persino valere la pena provare un tag che sia solo un’emoji di bandiera…

Sì, va bene anche solo un’emoji… ma non potrai trovarla facilmente tramite una ricerca nel menu a tendina dei tag (quando pubblichi).

2 Mi Piace

Ok, solo un’ultima domanda un po’ stupida: come faccio a far funzionare l’emoji come hai fatto tu sopra con il francese? Ho provato a creare un tag ":sweden:-svenska" ma non si traduce nella bandiera svedese.

Devi utilizzare un simbolo emoji (su dispositivi mobili, ad esempio, devi passare alla tastiera delle emoji).

3 Mi Piace

Ohhhh, pensavo che gli emoji funzionassero su Discourse. Ok, devo passare a un dispositivo mobile. Pensavo di poterli usare in qualche modo. Ha funzionato, grazie!

3 Mi Piace

Se ho capito bene, non esiste un modo semplice per scoprire a quale gruppo appartiene un tag all’interno del renderer dei tag?

Questa sarebbe ottima. In precedenza utilizzavo un approccio CSS personalizzato, ma l’ho abbandonato a favore di questo componente del tema con un fallback icon per tutti i tag non impostati (almeno prima del supporto per i gruppi di tag), ed è proprio questo l’elemento che mi manca.

Considerando che discourse-category-icons supporta questa funzionalità, immagino che il renderer sostituito da replaceCategoryLinkRenderer sia utilizzato dal menu a discesa delle categorie, mentre il renderer sostituito da replaceTagRenderer NON sia utilizzato dal menu a discesa dei tag, giusto? Quindi forse sarebbe necessaria una modifica al core? Il menu a discesa dei tag nell’editor utilizza il renderer sostituito, con le icone.

2 Mi Piace