Иконки тегов

[TheBestPessimist]

Теги со списком + цвет тега

Если вы используете теги в виде маркированного списка и

• хотите, чтобы иконка тега и текст тега имели одинаковый цвет
• хотите отображать маркер только если иконка тега не установлена

вот как я это реализовал для тегов books и science-fiction:

Итоговый результат:

1. Настройка компонента Tag icons (этого компонента)

2. Настройка дополнительного компонента, который должен синхронизироваться с Tag Icons
   В этом компоненте мы делаем две вещи:
   1. Скрываем маркер для определённых тегов
   2. Красим текст тега в тот же цвет, что и иконка

Для этого создаём новый компонент темы: Tag Icons extra.
В разделе Common/CSS:

1. Добавьте следующую миксин (нужна только один раз):

@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}

2. Для каждого тега, который вы хотите изменить, вставьте следующее и замените REPLACEMETAG на имя тега, а REPLACEMECOLOR — на тот же цвет, что и у иконки:

[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}