Header icon got smaller after upgrade


#1

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

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>

(Simon Cossar) #2

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

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

#3

Thank you, it worked like a charm!


#4

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


(Simon Cossar) #5

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

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

#6

Thank you, that also worked!