Неверное соответствие тега иконке тега

Сначала просто хочу сказать спасибо за этот замечательный компонент. Он действительно помог классифицировать и легко различать теги и, в конечном итоге, категории. Наше сообщество оставило потрясающие отзывы об этом компоненте, так что спасибо!

У меня, кажется, возникло две отдельные проблемы, которые я надеюсь можно будет решить:

  1. Иконки вводятся правильно, но никогда не отображаются (похоже на проблему @MrDavis97, но также отличается тем, что они изначально никогда не появлялись)
  2. Некоторые теги показывают место, где должна быть иконка, но ничего не отображается

Пример 1:
Я ввёл два разных тега, оба используют одну и ту же иконку Font-Awesome (exclamation-circle). Однако на одном теге она работает, а на другом — нет.

Я пробовал использовать другую иконку FA, удалять и добавлять заново, но ничего не помогает.

Это также происходило с другими тегами (open-zwave-1-4, open-zwave-1-6, zwave-js-2-mqtt, zwave-2-mqtt и т.д.): Inovelli Community

Пример 2
Этот случай действительно странный, и возможно, проблема в FA. Один из наших тегов (google-home) мы хотели оформить с помощью иконки FA «Google». Как видно из схемы ниже (извините за все стрелки) — красным показано, как это было реализовано, а фиолетовым — что тег не отображается (кажется, есть заглушка — почти как будто эта иконка FA не работает). Ещё одна странность: при проверке страницы через инструменты разработчика она отображается правильно. Я подтвердил, что это бесплатная иконка, так что она должна работать. Единственное, что приходит в голову, — возможно, есть ограничение на использование логотипов, защищённых торговой маркой? Не уверен.

Как вы также можете видеть — если заменить иконку Google на другую, всё работает. Так что, возможно, это просто проблема FA, но я хотел обратить на это внимание, чтобы узнать, сталкивался ли кто-то ещё с подобным.

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

Ещё раз спасибо за такой крутой компонент!

5 лайков

У меня снова возникла точно такая же проблема, но теперь с тегами «discourse» и «jitsi». Я не могу добавить к ним какие-либо иконки. Фактически, к любому newly созданному тегу нельзя назначить иконку. Существующие теги можно изменять без проблем. Есть ли способ сгенерировать лог об этом?

1 лайк

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

У меня сейчас 33 тега, все они перечислены здесь.

1 лайк

Привет, @AquaL1te и @e3hines,
Я обновил компонент, чтобы исправить ошибку, с которой столкнулись вы оба.

Проблема заключалась в том, что код компонента ранее сопоставлял неверный тег для определённой иконки. На сайте AquaL1te это особенно заметно:

Когда компонент искал иконку для jitsi, он ошибочно сопоставлял it, чтобы получить иконку (и только на втором этапе проверялось полное имя тега; поскольку совпадения не было, ничего не отображалось).

Если вы обновите компонент, проблема должна быть исправлена.

Поскольку Font Awesome включает несколько наборов иконок, для иконок брендов требуется префикс. Попробуйте использовать fab-google, это должно сработать. (И извините, что так долго отвечал на это…)

6 лайков

Это действительно решает проблему! Спасибо!

1 лайк

Отлично, у меня тоже всё заработало — огромное спасибо!

1 лайк