Tentando usar CSS para inserir ícones PNG em caixas de tag

Suporte
1

Olá, estou tentando usar um conjunto de ícones PNG para os ícones nas tags do meu fórum. Consegui fazê-los caber na caixa da tag e ficar com uma boa aparência, mas isso se aplica a todas as caixas de tags. Descobri como direcionar tags específicas, mas qual seria a maneira correta de selecionar aquela caixa de tag específica para inserir o ícone PNG? Qualquer ajuda seria incrível!

Tentando selecionar uma única tag -

.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;
}

Selecionando todas -

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

Por que não usar glifos SVG em vez de PNGs? Há um componente para isso em Tag Icons

3

Já estava tentando isso, mas com o que estou tentando fazer, precisaria converter mais de 400 ícones PNG para SVG e depois transformar tudo em um sprite SVG. Pelo que tentei e li, não existe uma maneira rápida ou boa de convertê-los mantendo a qualidade do PNG original. Tentei com um ícone algumas vezes, mas a qualidade geralmente diminuía e, ao colocá-lo em um sprite, não conseguia fazê-lo carregar com o componente do tema.

4

Você pode usar o seletor de atributo CSS

Aqui está um exemplo com a tag de pergunta:

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

Com 400 tags, talvez seja necessário usar algo diferente de [href*= para alguns elementos. Existem algumas alternativas para acionar o elemento de atributo.

5

ah, valeu! :grinning: isso deve funcionar muito bem com o que estou tentando fazer.