Header icon invisible after upgrade

[Silvanus]

The same header icon as before:

Header icon got smaller after upgrade

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 …

This time upgrade from 2.0.0 to v2.3.0.beta2 +206

Resulted: icon is still the right size and highlights properly, but the lightning is not visible anymore. I wonder what happened here?

[Stranik (Evgeny)]

Can be the reason in this?

Introducing Font Awesome 5 and SVG icons

We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see this Github article for more details since the Font Awesome icon set has grown to 1300+ icons in v…

[Silvanus]

This is very likely. I will proceed with testing…

[Silvanus]

I used this as a guide and managed to fix it: Introducing Font Awesome 5 and SVG icons (Also added fa-bolt to settings…)

Now I’m pondering how to change colour of the top buttons…

[cpradio]

@Silvanus

Now I’m pondering how to change colour of the top buttons…

You need to target the SVG element and apply color to it using CSS.

[Silvanus]

@cpradio

apply color to it using CSS.

I’m already getting a colour change by changing the colour scheme of the entire site. However, if I set the color of the top texts and icons to ffffff, they appear grey; if efffff, they appear quite blue…

weird colours.pdf (1.1 MB)

[awesomerobot (Kris)]

By default we adjust the colors to reduce contrast against the background. You can override this behavior with CSS (add to admin > customize > themes > edit html/css > common).

ul.d-header-icons .d-icon {
   color: #fff;
}

[Silvanus]

Thank you, it worked like a charm!

All header problems fixed!

[Silvanus]

(switched this to a brand new topic)