Tag Icons

Настройка Компонент темы
,
104

Хорошо, мне удалось разместить иконку в поле тега так, чтобы это выглядело красиво, но это применимо ко всем полям тегов. Я нашел способ нацелиться на конкретные теги, но какой правильный способ выбрать именно это поле тега, чтобы вставить туда PNG-иконку?

Попытка выбрать один —

.tag-question::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

Выбор всех —

a.discourse-tag.box::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}
107

Если вы всё ещё ищете, я обнаружил, что на этом сайте много SVG-иконков флагов. Возможно, их можно будет загрузить в качестве пользовательских SVG-иконков на Discourse, но пока я точно не уверен.

https://www.flaticon.com/packs/search?word=flags&shape=lineal-color&order_by=4&type=icon

3 лайка
108

Работает отлично! Вот несколько предложений по улучшению:

  1. Автоматически предлагать добавлять svg-иконки на основе списка входов тегов-иконок
  2. Преобразовать список тегов-иконок в таблицу из 3 столбцов, где будет доступно автодополнение для тегов и иконок Font Awesome v5
  3. Добавить ссылку на Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome, так как я искал в последней версии Font Awesome (текущая v6) и не понимал, почему мои входы не работают
  4. Перейти на Font Awesome v6

Спасибо за этот инструмент.

1 лайк
109

Есть ли какие-то идеи, почему между тегами нет пробела? Это происходит только на мобильных устройствах.

Скриншот

photo_2022-07-23_21-03-10
photo_2022-07-23_21-03-101080×1198 153 KB

111

По какой-то причине созданные два тега не работают. Неужели это ошибка? Я создал тег interview с SVG-логотипом microphone-stand и тег lecture с SVG-логотипом camcorder. Оба остаются пустыми.

Screenshot 2022-08-27 at 18-57-23 Tags - TZM Community Forum
Screenshot 2022-08-27 at 18-57-23 Tags - TZM Community Forum1090×159 5.01 KB

Screenshot 2022-08-27 at 18-57-56 Admin - TZM Community Forum
Screenshot 2022-08-27 at 18-57-56 Admin - TZM Community Forum741×399 24.5 KB

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

Может ли кто-то воспроизвести эту проблему? Я смог воспроизвести её в чистой среде разработки с установленным только этим компонентом темы. Как я могу узнать, какая версия FontAwesome используется? Возможно, я просто выбираю иконки, которые не включены в версию на Discourse. Я полагаю, что это версия 5.15. Поскольку эти иконки были включены в версии 5.11 или 6.0, они должны быть включены.

1 лайк
112

Я тоже не могу заставить их работать, так что, возможно, они просто не входят в доступный набор.

1 лайк
115

Привет! :waving_hand:t2:

Интересно, могу ли я использовать какие-то иконки с изображениями, например, природы?

116

Работает ли это с тегами в группах тегов?

Я только что провёл тест в приватной категории с вашим тегом1, и всё работает. Однако, похоже, теги в группе тегов не работают?

1 лайк
117

У меня возникла похожая проблема. Похоже, что когда тег превышает 10 символов, иконки не отображаются.

Разобрался с проблемой групп тегов. Похоже, нужно добавлять теги из групп напрямую в категорию, а не добавлять группу тегов?

119

Я не могу увидеть иконки тегов нигде, кроме боковой панели. У кого-нибудь есть идея, почему это происходит? Пробовал переустановить компонент, использовать только этот компонент вместе с темой по умолчанию, но безрезультатно.

image
image815×215 15.2 KB

120

Просто уточню: вы добавили иконки в настройку svg icons компонента темы?

2 лайка
121

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

image
image1372×425 45.7 KB

122

Привет, Darojax, добро пожаловать :wave:

У меня не получается воспроизвести это. :thinking:

Если только не задействован CSS или не переопределены шаблоны, теги отображаются везде одинаково.

Если возможно, можете поделиться ссылкой на ваш форум?

1 лайк
123

Здравствуйте, спасибо за ваш ответ. К сожалению, на данном этапе форум всё ещё находится в разработке и не доступен в интернете. Я свяжусь с вами, когда мы выйдем в публичный доступ, или если проблема будет решена.

1 лайк
124

Ладно, всё в порядке. Можете строго указать вашу текущую версию Discourse и перечислить активные плагины/компоненты? Возможно, это даст нам подсказку.

Я бы попробовал включить только компонент «Иконки тегов» с использованием стандартной темы без каких-либо изменений CSS, чтобы проверить, появится ли проблема. Если нет, то из этого вы сможете понять, что является причиной.

1 лайк
125

Конечно:

Установленная версия Discourse
3.2.0.beta2
(be04154838)

Последняя версия
3.2.0.beta2

Я создал новую тему по умолчанию и использую только компонент иконок тегов, установленный напрямую через GitHub:

а также два плагина:

image
image1111×192 20.5 KB

discourse-landing-pages

docker_manager

Других изменений CSS, HTML или иных настроек не вносилось.

3 лайка
126

ОК, я нашёл проблему. Похоже, плагин не может обрабатывать теги, начинающиеся с заглавной буквы. Я изменил имена тегов на все строчные, и теперь всё работает как задумано. На мой взгляд, теги, начинающиеся с заглавной буквы, выглядят аккуратнее. Было бы здорово, если бы эту проблему исправили. : ) Но всё же спасибо за отличный компонент.

1 лайк
127

Рад, что теперь всё работает. Однако, как вы создали эти теги? Обычно они принудительно приводятся к нижнему регистру.:thinking:

128

Для этого есть настройка в панели администратора:

image
image723×143 7.04 KB

1 лайк
129

Вы правы, моя ошибка, я забыл об этой настройке. :smile:

Я знаю, где проблема, позже предложу исправление. :+1:

3 лайка