Tag Icons

:discourse2: Summary Tag Icons allows tags to have an icon next to the tag label.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-tag-icons
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Here is an example of how this would look, with tag style set to the default (simple):

Here is how this looks with tag style set to box:

Settings

Name Description
tag icon list Enter comma-delimited configuration for tags, in the format “tag-slug,icon,iconColor”. Icon color is optional.
svg icons List of FontAwesome 6 icons used in this theme component

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @tobiaseigen 2025-08-27T06:57:11Z

Check documentPerform check on document:
80 лайков
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 лайка

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 лайков

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 лайка

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

9 лайков

Это позволяет добавлять пользовательские иконки к тегу, но что, если я хочу изменить цвет рамки тега?

3 лайка

Вы можете сделать это с помощью CSS. Например, код ниже установит цвет текста «theme-component» в красный:

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

(Это приведено только в иллюстративных целях; вам нужно будет подобрать собственный CSS.)

2 лайка

Понял, спасибо. Мне просто нужно перечислить все свои теги в CSS по имени и указать цвет. Было бы неплохо, если бы это можно было сделать из панели администратора, как с компонентами темы: через список с разделителями-запятыми и указание HEX-кода, точно так же, как для иконок.

Есть ли способ задать цвет для всех тегов в группе тегов через CSS?

4 лайка

В итоге у меня получилось что-то вроде этого: image (Значок тега по умолчанию всё ещё здесь)

Кто-нибудь видит подобный результат?

Найдите в настройках вашего сайта параметр «стиль тегов» и измените его на простой — это уберёт серые маркеры.

Понял, спасибо, но мне нужны стандартные серые маркеры для всех остальных тегов. Я добился этого, убрав маркеры для конкретного тега:

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

image

3 лайка

Выглядит как отличная доработка. Вопрос автору на посоветоваться: я думаю о том, чтобы украсить свои скучные теги, некоторые из которых я использую для маркировки постов по языкам (у меня есть теги «castellano», «deutsch» и т. д.), маленькими флагами стран. Стоит ли загружать кастомный .svg, как описано выше, или существуют предустановленные наборы иконок или, возможно, встроенные в Discourse наборы эмодзи, которые можно использовать?

2 лайка

Для флагов стран логично использовать эмодзи, но этот компонент не использует эмодзи — он применяет иконки из набора, например Font Awesome.

Вы можете попробовать добавить эмодзи напрямую в метку тега. Я пробовал это локально, но сложность в том, что в тегах нельзя использовать пробелы. Пример:

Если вас устраивает дефис, то это правильный путь.

4 лайка

Ого, это на самом деле довольно круто. Минус тире :slight_smile: но я, наверное, мог бы с этим смириться. Возможно, даже стоит попробовать тег, состоящий только из эмодзи флага…

Да, одного эмодзи достаточно… но вы не сможете легко найти его при поиске в выпадающем списке тегов (при публикации).

2 лайка

Ладно, ещё один полудурной вопрос: как заставить эмодзи работать так, как у вас получилось выше с французским? Я попробовал создать тег :sweden:-svenska, но он не превращается в шведский флаг.

Вам нужно использовать символ эмодзи (например, на мобильном устройстве переключитесь на клавиатуру эмодзи).

3 лайка

Ох, я думал, что эмодзи в Discourse. Ладно, нужно переключиться на мобильное устройство. Я думал, что каким-то образом смогу их использовать. Сработало, спасибо!

3 лайка

Правильно ли я понял, что в рендерере тегов нет простого способа определить, к какой группе принадлежит тот или иной тег?

Это было бы отлично. Ранее я использовал подход с пользовательским CSS, но отказался от него в пользу этого компонента темы с иконкой по умолчанию для всех тегов, у которых иконка не задана (по крайней мере, до появления поддержки групп тегов), и именно этого мне сейчас не хватает.

Учитывая, что discourse-category-icons поддерживает эту функцию, я предполагаю, что рендерер, который заменяет replaceCategoryLinkRenderer, используется в выпадающем меню категорий, тогда как рендерер, заменяемый replaceTagRenderer, в выпадающем меню тегов не используется, верно? Значит, возможно, для этого потребуется изменение в ядре? Выпадающее меню тегов в редакторе использует заменённый рендерер с иконками.

2 лайка