Versuche, CSS zum Einfügen von PNG-Icons in Tag-Boxen zu verwenden

Unterstützung
1

Hallo, ich versuche, eine Reihe von PNG-Icons für Tags auf meinem Forum zu verwenden. Ich habe es geschafft, sie so in das Tag-Feld einzupassen, dass es gut aussieht, aber das gilt für alle Tag-Felder. Ich habe herausgefunden, wie man bestimmte Tags auswählt, aber was ist der richtige Weg, um genau dieses Tag-Feld auszuwählen, um das PNG-Icon einzufügen? Jede Hilfe wäre super!

Versuch, eines auszuwählen -

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

Alle auswählen -

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

Warum nicht SVG-Glyphen statt PNGs verwenden? Es gibt dafür eine Komponente unter Tag Icons

3

Ich habe das bereits versucht, aber für das, was ich erreichen möchte, müsste ich über 400 PNG-Icons in SVG konvertieren und daraus eine SVG-Sprite erstellen. Nach meinen bisherigen Versuchen und Recherchen gibt es keine schnelle oder gute Möglichkeit, sie zu konvertieren und gleichzeitig die Qualität des ursprünglichen PNGs zu erhalten. Ich habe es mit einem Icon einige Male versucht, aber die Qualität verschlechterte sich meist. Und als ich es dann in eine Sprite einfügte, ließ es sich nicht mit dem Theme-Komponenten laden.

4

Sie können den CSS-Attributselektor verwenden.

Hier ist ein Beispiel mit dem Tag-Fragezeichen:

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

Bei 400 Tags müssen Sie für einige Elemente möglicherweise etwas anderes als [href*= verwenden. Es gibt einige Alternativen, um das Attributselement auszulösen.

5

Ah, danke! :grinning: Das sollte super für das funktionieren, was ich vor habe.