タグボックスにCSSでPNGアイコンを挿入しようとしています

サポート
1

こんにちは、フォーラムのタグに PNG アイコンを使用しようとしています。タグボックスに収まり、見た目も良くなりましたが、すべてのタグボックスに適用されてしまいます。特定のタグをターゲットにする方法は見つかったのですが、その特定のタグボックスに PNG アイコンを適用するための正しい選択方法はなんでしょうか？ご助力いただければ幸いです！

1 つを選択しようとしています -

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

すべてを選択 -

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

なぜPNGの代わりにSVGグリフを使用しないのでしょうか？これに関するコンポーネントは Tag Icons にあります。

3

すでに試してみましたが、やりたいことを行うには、400 枚以上の PNG アイコンを SVG に変換し、それらをすべて SVG スプライト化する必要があります。私が試したり読んだりした限りでは、元の PNG の画質を保ちつつ、それらを高速かつ高品質に変換する方法は存在しません。数回、1 つのアイコンで試してみましたが、画質が低下することが多く、それをスプライトに組み込んだところ、テーマコンポーネントで読み込めませんでした。

4

CSS 属性セレクタを使用できます。

以下は、タグの疑問文に関する例です。

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

タグが 400 個ある場合、一部の要素に対して [href*= 以外の方法を使用する必要があるかもしれません。属性要素をトリガーするためのいくつかの代替手段があります。

5

あ、ありがとう！:grinning: これなら、私がやろうとしていることにぴったり合いそうです。