添加图标而非文本

贡献 用户体验
1

这个插件太棒了——我不擅长处理插件，所以不知道如何基于它进行分支开发，但我感觉 Discourse 有一种很棒的“简洁”感——如果能支持图片/图标那就太好了。

以下是我实现 Discord 图标的一种“土法”：

image
image281×100 5.1 KB

（除了颜色饱和度——HDR 截图的 bug 真是最糟糕的）

image

安装后，创建一个新的 CSS 组件，或者直接编辑主题：

以下是我使用的代码：

.headerLink
{
    color: white;
    
    &.d
    {
        background-image: url('https://i.imgur.com/MSef433.png');
        background-repeat: no-repeat;
        background-size: 22px;
        
        a
        {
            color: rgba(0, 0, 0, 0);
            text-decoration: none;
            &:hover
            {
                box-shadow: 0px 2px lightgray;
            }
        }
    }
}
  • 我在悬停效果上遇到了一些问题，因此悬停时添加底部阴影是我能想到的最佳方案，因为这些是图片而不是 Unicode 字符：

image

  • 我将上面的示例命名为 d，因为你必须给它起个名字。我将字体透明度设为 0，使其隐藏，但 d 让我能够利用 d 类名。

  • 是否有办法实现这一点？可能吧。但这是一种“土法”，可以在更好的方案出现之前提出一些想法 :slight_smile:

2 个赞
2

首先，这是一个主题组件，而不是插件。最好在用户感到困惑并尝试像安装插件一样安装它之前就明确说明这一点。

第二点是，你为什么要使用这个主题组件，而不是使用 https://meta.discourse.org/t/iconified-header-links/86307？后者正是用于在菜单中添加图标的。:open_mouth:

6 个赞
3

哎呀，这就是我没有制作组件的原因——我还在学习这些术语。

我想，是因为它不够“酷”，无法出现在那些“懒人链接安装”组件的列表中吧；D 如果文本链接应该在那里，我希望图标也能在那里！看起来非常棒。我现在就去看看。

编辑： 效果非常好。

3 个赞