尝试使用 CSS 在标签框中插入 PNG 图标

支持
1

你好，我尝试在论坛标签上使用一组 PNG 图标。我已经让图标在标签框中显示得不错，但问题是这会影响所有标签框。我找到了如何针对特定标签，但不确定选择特定标签框以添加 PNG 图标的正确方法是什么？任何帮助都将非常棒！

尝试选择单个标签：

.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

为什么不使用 SVG 字形而不是 PNG 呢？这里有一个相关的组件：Tag Icons

3

我已经在尝试了，但根据我的需求，我需要将 400 多个 PNG 图标转换为 SVG，然后将它们全部整合成一个 SVG 精灵图。根据我尝试和查阅的资料，目前并没有一种既快速又能保持原始 PNG 质量的转换方法。我曾尝试对单个图标进行几次转换，但质量通常会下降；而当我将其放入精灵图后，主题组件也无法正常加载。

4

你可以使用 CSS 属性选择器。

这是一个带有标签问题的示例：

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

如果有 400 个标签，对于某些元素你可能需要采用 [href*= 以外的方式。有一些替代方案可以触发属性选择器。

5

啊，谢谢！:grinning: 这应该能很好地满足我的需求。