标签图标

好的,我已经让它在标签框里显示得很漂亮了,但这适用于所有标签框。我找到了如何针对特定标签,但正确选择那个标签框以放入 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;
}

如果你还在找,我找到了这个网站,上面有很多国旗SVG图标,或许可以在Discourse上上传为自定义SVG图标,还不确定。\n\nhttps://www.flaticon.com/packs/search?word=flags&shape=lineal-color&order_by=4&type=icon

3 个赞

运行得很棒!这里有一些功能请求:

  1. 自动建议通过标签图标列表输入自动添加 svg-图标
  2. 将标签图标列表转换为 3 列表,其中可以自动完成标签和 font-awesome v5 图标
  3. 添加一个指向 Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome 的链接,因为我一直在搜索最新的 font awesome(当前 v6)并想知道为什么我的输入不起作用。
  4. 采用 font awesome v6

感谢您提供这个。

1 个赞

在标签之间没有空格,有什么想法吗?只在手机上发生

截图

有两个已创建的标签因某种原因不起作用,这可能是个 bug 吗?我创建了带有 SVG 徽标 microphone-stand 的标签 interview,以及带有 SVG 徽标 camcorder 的标签 lecture。两者都显示为空白。


当我将这两个标签设置为使用我已用于另一个标签的 film SVG 徽标时,它们可以正常工作。所以,出于某种原因,我最初想使用的两个徽标未被接受。

有人能重现此问题吗?我可以在仅安装了此主题组件的干净开发环境中重现它。我如何查看正在使用哪个版本的 FontAwesome?也许我只是选择了 Discourse 版本中未包含的图标。我猜它使用的是 5.15 版本。由于这些图标包含在 5.11 或 6.0 中,因此应该包含在内。

1 个赞

我也无法让它们工作,所以可能是因为它们不包含在可用集合中。

1 个赞

您好!:waving_hand:t2:

我想知道是否可以使用一些像自然这样的图标和图片?

这是否适用于标签组中的标签?

我刚刚在一个私有类别中测试了你的 tag1,它有效。但是标签组中的标签似乎不起作用?

1 个赞

我遇到了类似的问题。似乎当标签超过 10 个字符时,图标将不显示。

已解决标签组问题。似乎需要直接将标签从组添加到类别,而不是添加标签组?

我无法在侧边栏以外的任何地方显示标签图标。有人知道为什么会这样吗?我尝试重新安装组件,只将该组件与默认主题一起使用,但仍然无效。

只是为了确认一下,您是否已将图标添加到主题组件的 svg icons 设置中?

2 个赞

是的,我看到了,你可以看到图标本身出现在侧边栏的左侧,但它们没有出现在其他任何地方:

您好,Darojax,欢迎 :wave:

我这边无法复现此问题。:thinking:

除非涉及到 CSS 或模板被覆盖,否则标签的渲染方式在任何地方都是一样的。

如果可能的话,您能分享一下您的论坛 URL 吗?

1 个赞

您好,感谢您的回复。遗憾的是,在此阶段论坛仍在开发中,尚未在互联网上开放。一旦我们公开,或者如果问题得到解决,我会再回复您。

1 个赞

好的,没问题。请提供您当前的 Discourse 版本并列出启用的插件/组件?这或许能给我们一些线索。

我会尝试仅启用“标签图标”组件,并使用默认主题,不进行任何 CSS 修改,看看问题是否会出现。如果不会,您就可以找出罪魁祸首了。

1 个赞

当然:

已安装的 Discourse 版本
3.2.0.beta2
(be04154838)

最新版本
3.2.0.beta2

我创建了一个全新的默认主题,并且仅通过 GitHub 直接安装了 Tag icons 组件:

以及两个插件:

discourse-landing-pages

docker_manager

没有进行其他 CSS、HTML 或自定义设置。

3 个赞

好的,我已找到问题所在。该插件似乎无法处理以大写字母开头的标签。我已将标签名称全部更改为小写,现在可以按预期工作。在我看来,以大写字母开头的标签看起来更整洁,如果能解决此问题将非常棒。: ) 但仍然感谢您提供了出色的组件。

1 个赞

我现在很高兴它能正常工作。但是,您是如何创建那些标签的?它们通常会被强制转换为小写。:thinking:

管理面板中有一个设置:

1 个赞

你说得对,我的错,我忘了这个设置了。:smile:

我知道问题出在哪里了,晚些时候我会提出一个修复方案。:+1:

3 个赞