Пытаюсь использовать CSS для вставки иконок PNG в теги

Поддержка
1

Привет! Я пытаюсь использовать набор иконок PNG для тегов на моём форуме. Мне удалось настроить их так, чтобы они красиво вписывались в блок тега, но это применимо ко всем блокам тегов. Я нашёл, как выбирать конкретные теги, но какой правильный способ выбрать именно тот блок тега, чтобы добавить туда 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;
}
2

Почему бы не использовать глифы SVG вместо PNG? Для этого есть компонент по адресу Tag Icons

3

Я уже пробовал это делать, но для того, что я планирую, мне пришлось бы конвертировать более 400 PNG-икон в SVG, а затем собрать их в SVG-спрайт. Однако, судя по моим экспериментам и прочитанному, быстрого и качественного способа конвертации с сохранением исходного качества PNG не существует. Я пробовал конвертировать одну иконку несколько раз, но качество обычно ухудшалось, а при добавлении её в спрайт она не загружалась в компоненте темы.

4

Вы можете использовать селектор атрибутов CSS.

Вот пример с тегом вопроса:

a.discourse-tag.box[href*="question"]::before {

При наличии 400 тегов для некоторых элементов может потребоваться использовать что-то другое, кроме [href*=. Существует несколько альтернатив для срабатывания селектора атрибутов.

5

ах, спасибо! :grinning: это должно отлично подойти для того, что я пытаюсь сделать.