Trying to use css to insert png icons in tag boxes

Product Support

AI-generated summary

Trying to Use CSS to Insert PNG Icons in Tag Boxes

DogeRTX is trying to insert PNG icons into specific tag boxes using CSS. They have successfully targeted all tag boxes but need help selecting individual tags.

DogeRTX provided their current CSS code for selecting all tags and a specific tag.

Codinghorror suggested using SVG glyphs instead of PNGs, citing a relevant component on Meta Discourse. However, DogeRTX mentioned that converting 400+ PNG icons to SVG would be challenging and may compromise image quality.

Steven proposed using a CSS attribute selector to target specific tags. He provided an example using [href*="question"] and recommended exploring alternative attribute selectors for more complex cases.

DogeRTX expressed gratitude and optimism that Steven’s solution will work for their needs.

1

Hello, I am trying to use a set of png icons for icons on my forum on the tags. iv got it to fit in the tag box how it looks nice but that’s for every tags box, iv found how to target specific tags but what would be the right way of selecting that specific tag box to put in the png icon? Any help would be awesome!

trying to select one -

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

Selecting all -

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

Why not use SVG glyphs instead of PNGs? There’s a component for this at Tag Icons

3

I was already trying that but with what I am trying to do I would need to try and convert like 400+ png icons to svg and then make all of that an svg sprite and from what iv tried and read there isn’t a fast or good way of converting them and keeping the quality of the original png. I did try with one icon a few times but the quality would usually go down and then when I put it into a sprite I couldn’t get it to load with the theme component.

4

You can use css attribute selector

Here is an example with the tag question :

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

With 400 tags you might need to use something else than the [href*= for some elements. There are a few alternatives to trigger the attribute element.

5

ah, ty! :grinning: this should work great with what I am trying to do.