Tentativo di usare css per inserire icone png nelle caselle di tag

Supporto
1

Ciao, sto cercando di utilizzare un set di icone PNG per i tag del mio forum. Sono riuscito a farle entrare nella casella del tag in modo che si vedano bene, ma questo vale per tutte le caselle dei tag. Ho scoperto come selezionare tag specifici, ma qual è il modo corretto per selezionare quella specifica casella di tag per inserire l’icona PNG? Qualsiasi aiuto sarebbe fantastico!

Provo a selezionarne uno:

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

Selezionando tutti:

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

Perché non usare glifi SVG invece di PNG? C’è un componente a questo proposito su Tag Icons

3

Stavo già provando quella strada, ma per quello che sto cercando di fare dovrei convertire oltre 400 icone PNG in SVG e poi creare un sprite SVG con tutto. Da quello che ho provato e letto, non esiste un modo veloce o efficace per convertirle mantenendo la qualità delle PNG originali. Ho provato con un’icona alcune volte, ma la qualità tendeva a peggiorare e, quando la inserivo nello sprite, non riuscivo a farla caricare correttamente con il componente del tema.

4

Puoi utilizzare il selettore di attributo CSS

Ecco un esempio con il tag domanda:

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

Con 400 tag, per alcuni elementi potrebbe essere necessario utilizzare qualcosa di diverso da [href*=. Esistono alcune alternative per attivare l’elemento dell’attributo.

5

ah, grazie! :grinning: questo dovrebbe funzionare benissimo con quello che sto cercando di fare.