# Пытаюсь использовать CSS для вставки иконок PNG в теги
**URL:** https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050
**Category:** Support
**Created:** [29.Май.2021 20:30:38 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050 "2021-05-29T20:30:38Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@DogeRTX](https://meta.discourse.org/u/DogeRTX)
#### Post date: [29.Май.2021 20:30:38 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050/1 "2021-05-29T20:30:38Z")
Привет! Я пытаюсь использовать набор иконок PNG для тегов на моём форуме. Мне удалось настроить их так, чтобы они красиво вписывались в блок тега, но это применимо ко всем блокам тегов. Я нашёл, как выбирать конкретные теги, но какой правильный способ выбрать именно тот блок тега, чтобы добавить туда PNG-иконку? Любая помощь будет очень кстати!
Попытка выбрать один:
```plaintext
.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;
}
```
Выбор всех:
```plaintext
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;
}
```
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Май.2021 20:38:21 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050/2 "2021-05-29T20:38:21Z")
Почему бы не использовать глифы SVG вместо PNG? Для этого есть компонент по адресу [Tag Icons](https://meta.discourse.org/t/tag-icons-component/109757)
---
### Author:  [@DogeRTX](https://meta.discourse.org/u/DogeRTX)
#### Post date: [29.Май.2021 20:42:24 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050/3 "2021-05-29T20:42:24Z")
Я уже пробовал это делать, но для того, что я планирую, мне пришлось бы конвертировать более 400 PNG-икон в SVG, а затем собрать их в SVG-спрайт. Однако, судя по моим экспериментам и прочитанному, быстрого и качественного способа конвертации с сохранением исходного качества PNG не существует. Я пробовал конвертировать одну иконку несколько раз, но качество обычно ухудшалось, а при добавлении её в спрайт она не загружалась в компоненте темы.
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [29.Май.2021 20:50:02 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050/4 "2021-05-29T20:50:02Z")
Вы можете использовать селектор атрибутов CSS.
Вот пример с тегом вопроса:
```css
a.discourse-tag.box[href*="question"]::before {
```
При наличии 400 тегов для некоторых элементов может потребоваться использовать что-то другое, кроме `[href*=`. Существует несколько альтернатив для срабатывания селектора атрибутов.
> **[W3Schools.com](https://www.w3schools.com/css/css_attribute_selectors.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
---
### Author:  [@DogeRTX](https://meta.discourse.org/u/DogeRTX)
#### Post date: [30.Май.2021 00:25:07 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050/5 "2021-05-30T00:25:07Z")
ах, спасибо! 😀 это должно отлично подойти для того, что я пытаюсь сделать.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [02.Июль.2021 08:58:38 UTC](https://meta.discourse.org/t/trying-to-use-css-to-insert-png-icons-in-tag-boxes/192050/6 "2021-07-02T08:58:38Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.