Essayer d'utiliser CSS pour insérer des icônes PNG dans des boîtes de balises

Soutien
1

Bonjour, j’essaie d’utiliser un ensemble d’icônes PNG pour les balises de mon forum. J’ai réussi à les faire tenir dans la boîte de balise, ce qui donne un bel aspect, mais cela s’applique à toutes les boîtes de balise. J’ai trouvé comment cibler des balises spécifiques, mais quelle serait la bonne méthode pour sélectionner cette boîte de balise spécifique afin d’y insérer l’icône PNG ? Toute aide serait super !

Essayer de sélectionner une seule balise :

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

Sélectionner toutes les balises :

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

Pourquoi ne pas utiliser des glyphes SVG au lieu de PNG ? Il existe un composant pour cela à l’adresse Tag Icons

3

J’essayais déjà cela, mais avec ce que je cherche à faire, je devrais convertir plus de 400 icônes PNG en SVG, puis créer un sprite SVG à partir de tout cela. D’après mes essais et mes recherches, il n’existe pas de méthode rapide ou efficace pour les convertir tout en préservant la qualité des PNG d’origine. J’ai essayé avec une seule icône à plusieurs reprises, mais la qualité se dégradait généralement, et lorsque je l’intégrais dans un sprite, je n’arrivais pas à la faire charger avec le composant du thème.

4

Vous pouvez utiliser le sélecteur d’attribut CSS.

Voici un exemple avec la balise question :

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

Avec 400 balises, il se peut que vous deviez utiliser autre chose que [href*= pour certains éléments. Il existe quelques alternatives pour déclencher l’élément d’attribut.

4 « J'aime »
5

ah, merci ! :grinning: cela devrait très bien fonctionner avec ce que j’essaie de faire.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.