# 升级后标题栏图标不可见

**URL:** <https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121>\
**Category:** Support\
**Created:** [2019年二月26日 12:58 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121 "2019-02-26T12:58:33Z")\
**Posts on this page:** 10\
**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:** [2019年二月26日 12:58 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/1 "2019-02-26T12:58:33Z")

</div>

The same header icon as before:

> [@Header icon got smaller after upgrade](https://meta.discourse.org/t/header-icon-got-smaller-after-upgrade/73019):
>
> 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?

---

<div class="post-metadata">

**Author:** ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)\
**Post date:** [2019年二月26日 13:52 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/2 "2019-02-26T13:52:30Z")

</div>

Can be the reason in this?

> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643):
>
> See also: [We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) We will shortly merge into master a [branch](https://github.com/discourse/discourse/tree/fontawesome5) 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](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) for more details since…

---

<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:** [2019年二月26日 15:49 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/3 "2019-02-26T15:49:08Z")

</div>

This is very likely. I will proceed with testing…

---

<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:** [2019年二月26日 16:01 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/4 "2019-02-26T16:01:21Z")

</div>

I used this as a guide and managed to fix it: [Introducing Font Awesome 5 and SVG icons - #27 by tshenry](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/27) (Also added fa-bolt to settings…)

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

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2019年二月26日 16:03 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/5 "2019-02-26T16:03:48Z")

</div>

> [@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.

---

<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:** [2019年二月26日 16:08 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/6 "2019-02-26T16:08:27Z")

</div>

> [@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](https://global.discourse-cdn.com/meta/original/3X/4/f/4f23fe2f82f6879c0cb0d20b1b90252c69533039.pdf) (1.1 MB)

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2019年二月26日 16:25 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/7 "2019-02-26T16:25:17Z")

</div>

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

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

```

---

<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:** [2019年二月26日 18:59 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/8 "2019-02-26T18:59:30Z")

</div>

Thank you, it worked like a charm!

All header problems fixed! 🙂

---

<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:** [2019年二月26日 19:04 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/9 "2019-02-26T19:04:05Z")

</div>

(switched this to a brand new topic)

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [2019年二月28日 11:17 UTC](https://meta.discourse.org/t/header-icon-invisible-after-upgrade/110121/10 "2019-02-28T11:17:21Z")

</div>


