Adding icons rather than text

ux
1

This plugin is amazing – I’m not good at plugins, so don’t know how to branch off of it myself, but I feel that Discourse has a nice “simplicity” feel to it – it would be great to support images/icons.

Here is a ghetto way of how I achieved a Discord icon:

image

(Minus the color saturation – HDR screenshot bugs are the worst)

image

After installed, make a new CSS component, or edit the theme directly:

Here is what I used –

.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;
            }
        }
    }
}
  • I had issues with hover effects, so a bottom box shadow on hover is the best I got, since these are images instead of unicode:

image

  • I named the above example d because you have to name it something. I make the font 0 opacity, so it gets hidden, but d allows me to utilize the d class.

  • Is there a way to do this? Probably. But this is the ghetto way to bring about ideas until something better reveals itself :slight_smile:

2 Likes
2

First of all this is a theme component, not a plugin. It is better to specify this before users get confused and try to install it like a plugin.

The second thing is, why you use this theme component instead of Iconified Header Links which serves the purpose of adding icons to the menu? :open_mouth:

6 Likes
3

Heck, that’s why I didn’t make a component – I’m still learning the terms.

Because it’s not cool enough to show up in that last of lazy-link-install components, I suppose ;D if the text links should be there, I wish the icons were there, too! It’s pretty awesome looking. Gonna check it out now.

EDIT: Works wonderfully.

3 Likes