Ícones de Tag

:discourse2: Resumo Tag Icons permite que tags tenham um ícone ao lado do rótulo da tag.
:eyeglasses: Pré-visualização Pré-visualizar no Discourse Theme Creator
:hammer_and_wrench: Link do Repositório https://github.com/discourse/discourse-tag-icons
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

Funcionalidades

Aqui está um exemplo de como isso ficaria, com o estilo de tag definido como padrão (simples):

Aqui está como isso fica com o estilo de tag definido como box:

Configurações

Nome Descrição
lista de ícones de tag Insira a configuração delimitada por vírgula para tags, no formato “slug-da-tag,ícone,corDoÍcone”. A cor do ícone é opcional.
ícones svg Lista de ícones do FontAwesome 6 usados neste componente de tema

:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

79 curtidas
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 curtidas

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 curtidas

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 curtidas

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

9 curtidas

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 curtidas

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 curtidas

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 curtidas

Acabei obtendo algo assim: image (O ícone padrão da tag ainda está aqui)

Alguém vê esse tipo de resultado?

Procure por “estilo de tag” nas configurações do seu site e altere para simples; isso removerá os marcadores cinzas.

Entendi, obrigado, mas precisarei das bolinhas cinzas padrão para todas as outras tags. Consegui isso removendo as bolinhas para uma tag específica:

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

image

3 curtidas

Parece um ajuste fantástico. Uma pergunta para dar um conselho ao autor: Estou pensando em deixar meus tags sem graça mais vistosos, alguns dos quais uso para classificar posts por idioma (então tenho tags como “castellano”, “deutsch” etc.), com pequenas bandeiras de países. Fazer o upload de um arquivo .svg personalizado, conforme descrito acima, seria o caminho, ou existem conjuntos de ícones pré-configurados ou talvez conjuntos de emojis integrados ao Discourse que poderiam ser usados?

2 curtidas

Um emoji faria sentido para bandeiras de países, mas este componente não usa emojis; ele usa ícones de um conjunto de ícones como o Font Awesome.

Você pode tentar adicionar o emoji diretamente no rótulo da tag. Testei isso localmente, e o complicado é que as tags não podem ter espaços. Um exemplo:

Se você estiver de acordo com o traço, esse é o caminho a seguir.

4 curtidas

Nossa, isso é realmente bem legal. Menos o traço :slight_smile: mas eu provavelmente daria um jeitinho. Talvez até valha a pena tentar uma tag que seja apenas uma bandeira de emoji…

Sim, apenas um emoji é legal… mas você não conseguirá encontrá-lo facilmente em uma busca na lista suspensa de tags (ao postar).

2 curtidas

Ok, só mais uma pergunta meio boba: como faço para o emoji funcionar como você fez acima com o francês? Tentei criar uma tag :sweden:-svenska, mas não traduz para a bandeira da Suécia.

Você precisa usar um símbolo de emoji (no celular, por exemplo, você alternaria para o teclado de emojis).

3 curtidas

Ohhhh, eu achei que os emojis estivessem no Discourse. Ok, preciso mudar para um celular então. Achei que de alguma forma eu pudesse usar esses. Funcionou, obrigado!

3 curtidas

Se entendi corretamente, não há uma maneira fácil de descobrir o grupo ao qual uma tag pertence dentro do renderizador de tags?

Isso seria ótimo. Antes eu usava uma abordagem com CSS personalizado e a abandonei em favor deste componente de tema com um ícone de fallback para todas as tags não configuradas (pelo menos antes do suporte a grupos de tags), e é exatamente isso que sinto falta.

Considerando que discourse-category-icons suporta isso, estou imaginando que o renderizador substituído por replaceCategoryLinkRenderer é usado pelo menu suspenso de categorias, enquanto o renderizador substituído por replaceTagRenderer NÃO é usado pelo menu suspenso de tags, certo? Então, talvez isso exigisse uma alteração no núcleo? O menu suspenso de tags no compositor está usando o renderizador substituído, com ícones.

2 curtidas