# Adding icons rather than text

**URL:** https://meta.discourse.org/t/adding-icons-rather-than-text/277622
**Category:** UX
**Tags:** custom-header-links
**Created:** [May 30, 2019, 12:38pm UTC](https://meta.discourse.org/t/adding-icons-rather-than-text/277622 "2019-05-30T12:38:36Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![dylanh724](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dylanh724/32/119642_2.png) [@dylanh724](https://meta.discourse.org/u/dylanh724)
#### Post date: [May 30, 2019, 12:38pm UTC](https://meta.discourse.org/t/adding-icons-rather-than-text/277622/1 "2019-05-30T12:38:36Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/8/9/89857b20a35e2113c9de7be992265978d2555d10.png)

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

![image](https://global.discourse-cdn.com/meta/original/3X/3/b/3b2e63c8dfca33026b74873648a3c0dd1a54bf9f.png)

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](https://global.discourse-cdn.com/meta/original/3X/a/4/a4b9bc063d647033f9ea2674d26880449d4f1083.png)

- 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 🙂

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 30, 2019, 12:55pm UTC](https://meta.discourse.org/t/adding-icons-rather-than-text/277622/2 "2019-05-30T12:55:43Z")

</div>

> [@dylanh724](#):
>
> This plugin is amazing – I’m not good at plugins

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.

> [@dylanh724](#):
>
> it would be great to support **images/icons**.

The second thing is, why you use this theme component instead of [Custom Header Links (icons)](https://meta.discourse.org/t/iconified-header-links/86307) which serves the purpose of adding icons to the menu? 😮

---

<div class="post-metadata">

### Author: ![dylanh724](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dylanh724/32/119642_2.png) [@dylanh724](https://meta.discourse.org/u/dylanh724)
#### Post date: [May 30, 2019, 1:18pm UTC](https://meta.discourse.org/t/adding-icons-rather-than-text/277622/3 "2019-05-30T13:18:18Z")

</div>

> [@dax](#):
>
> 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.

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

> [@dax](#):
>
> The second thing is, why you use this theme component instead of [Iconified Header Links](https://meta.discourse.org/t/iconified-header-links/86307) which serves the purpose of adding icons to the menu? 😮

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.