# Header icon got smaller after upgrade

**URL:** https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019
**Category:** Support
**Created:** [October 29, 2017, 11:33pm UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019 "2017-10-29T23:33:19Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Silvanus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/silvanus/32/62831_2.png) [@Silvanus](https://meta.discourse.org/u/Silvanus)
#### Post date: [October 29, 2017, 11:33pm UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/1 "2017-10-29T23:33:19Z")

</div>

Update from 1.9.0.beta3 (I think!) caused a problem when moving to 1.9.0.beta11 (where I’m currently).

I have a quick link to latest at header, one left from the search button. **The problem is that the upgrade changed the size of the icon**. It used to be the same size as the other icons, but after upgrade (which I did a few weeks back, didn’t get around to fixing the problem, though…) it changed in size.

Here, see the **header** currently:  
 ![Screenshot from 2017-10-30 01-25-16](https://global.discourse-cdn.com/meta/original/3X/0/8/08a7ec3563878e3af6b02991d19802b9545a3459.png)

And here is the **code** I have in my `</head>`:

```
<!-- Lightning for quick entry to latest threads -->
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li.header-dropdown-toggle', [
        helper.h('a.icon#latest-button', {
            href:'https://uskojarukous.fi/latest',
            title: 'Uusimmat'
        }, helper.h('i.fa.fa-bolt.latest-button-icon')),
    ]);
});
</script>

```

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [October 30, 2017, 12:08am UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/2 "2017-10-30T00:08:22Z")

</div>

If you add the class `d-icon` to the `i` tag, it should work correctly. Try this:

```js
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li.header-dropdown-toggle', [
        helper.h('a.icon#latest-button', {
            href:'https://uskojarukous.fi/latest',
            title: 'Uusimmat'
        }, helper.h('i.fa.fa-bolt.d-icon.latest-button-icon')),
    ]);
});
</script>

```

---

<div class="post-metadata">

### Author: ![Silvanus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/silvanus/32/62831_2.png) [@Silvanus](https://meta.discourse.org/u/Silvanus)
#### Post date: [October 30, 2017, 12:27am UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/3 "2017-10-30T00:27:24Z")

</div>

Thank you, it worked like a charm!

---

<div class="post-metadata">

### Author: ![Silvanus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/silvanus/32/62831_2.png) [@Silvanus](https://meta.discourse.org/u/Silvanus)
#### Post date: [October 30, 2017, 12:31am UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/4 "2017-10-30T00:31:32Z")

</div>

Another question, I wonder if you might have an idea: it seems that the lightning is bright white, whereas the other icons are not so bright. How might I achieve a similar dim color to the lightning?

![Screenshot from 2017-10-30 02-31-42](https://global.discourse-cdn.com/meta/original/3X/3/e/3e964ac9f4cc8f04e2b9c896f34fa605256d8c6a.png)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [October 30, 2017, 12:59am UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/5 "2017-10-30T00:59:04Z")

</div>

Adding the class `btn-flat` to the surrounding `a` tag works. That gives the icon the same css classes as the other header icons.

```css
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li.header-dropdown-toggle', [
        helper.h('a.icon.btn-flat#latest-button', {
            href:'https://uskojarukous.fi/latest',
            title: 'Uusimmat'
        }, helper.h('i.fa.fa-bolt.d-icon.latest-button-icon')),
    ]);
});
</script>

```

---

<div class="post-metadata">

### Author: ![Silvanus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/silvanus/32/62831_2.png) [@Silvanus](https://meta.discourse.org/u/Silvanus)
#### Post date: [October 30, 2017, 12:01pm UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/6 "2017-10-30T12:01:24Z")

</div>

Thank you, that also worked!

 ![](https://global.discourse-cdn.com/meta/original/3X/a/1/a1f36994a984631a7925e5bd7ae0fb745ddeddb4.jpg)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [February 26, 2019, 12:55pm UTC](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019/7 "2019-02-26T12:55:33Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.