ヘッダーアイコンの色を変更する方法は？

Sentinelrv · 2019 年 1 月 9 日午後 7:11

現在、私たちのフォーラムは以下のようになっています…

カラーテーマのリブランディングを予定しています。ヘッダーは緑色で、ロゴは白になります。

ヘッダー内の虫眼鏡アイコンとハンバーガーメニューアイコンの色を変更する方法に困っています。現在はグレーですが、緑色のヘッダーの上に置くと見苦しくなってしまいます。白いアイコンにすれば、新しいヘッダーロゴとも調和します。

テーマメニューを確認したところ、「ヘッダープライマリー」というオプションがあり、説明には「サイトのヘッダー内のテキストとアイコンの色を変更する」と書かれています。すでに白に設定しましたが、変化がありません。これらの2つのアイコンの色を変更する別の方法はありませんか？

awesomerobot · 2019 年 1 月 9 日午後 7:32

The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header_primary color is set to white).

You can add some custom CSS to change this

.d-header-icons .icon {
  color: red; // custom color, if needed
  &.btn-flat .d-icon {
    opacity: 1; // remove transparency 
   }
}

outofthebox · 2019 年 2 月 18 日午後 2:39

Hi,

I have this CSS:

header{
    
    height: auto !important;
    
    .wrap{
        padding:14px 0;
    }
    
    .btn-flat .d-icon{
        opacity: 1 !important;
    }
    
    .d-header-icons .icon{
        color: #ffffff;
        padding: 0.4em;
    }
    
    .d-header-icons .icon:hover{
        background-color: #ffffff;
        opacity: 1 !important;
        color: #001d4d;
    }

However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?

awesomerobot · 2019 年 2 月 18 日午後 4:46

Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).

You can remove anything you have related to opacity, and do this

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

.d-header-icons .d-icon:hover {
   background-color: #fff; 
   color: #001d4d;
}

tophee · 2019 年 4 月 29 日午後 8:42

I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.

I tried this

and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:

So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.

I tried

.d-header-icons .d-icon:hover {
   background-color: #b0cee8; 
   color: #fff;
}

but it gives me this:

How do I get the whole box to change color? And I don’t understand why the icon itself doesn’t stay white…

And while I’m at it: My new topic button also suffered. The colour of the + icon is no longer the same as the text:

My CSS for the button is (and has always been):

@import "common/foundation/variables";

#create-topic {
    background-color: $tertiary;
    color: $secondary;
}

#create-topic:hover {
    background-color: $tertiary-high;
    color: $secondary;
}

Nick_Research · 2019 年 8 月 27 日午前 4:49

Hey, something has changed since your suggestion. I’m not sure why but this isn’t working for me either. CSS sheet looks like this:

    .custom-header-links a:hover {
    background-color:#346A77;
    }

    .d-header-icons .d-icon {
       color: black; 
    }

    .d-header-icons .d-icon:hover {
       background-color: #346A77; 
       color: red;
    }

The icons and the hover look like this–whatever color I make the icons or the hover it doesn’t “take”:

When I inspect the element it is showing that the style is there, but it’s not cascading for some reason. Any ideas?

I have installed custom headers but that wouldn’t be changing anything would it?

Many thanks

Nick_Research · 2019 年 8 月 27 日午前 5:01

Update: the following code works and @tophee this should solve yours too:

.d-header-icons .d-icon {
   color: black !important;
}

.d-header-icons a:hover {
   background-color: #346A77 !important;
}

Denis_Heraud · 2019 年 12 月 18 日午後 6:33

Thank you for the code.

I’m posting this in case someone runs into the same issue as me, but depending on the combination of colors you are using for your header and your icons (my header is a dark color), I was getting the right color combinations for my icons with the code you provided:

.d-header-icons .d-icon {
color: white !important;
}

.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}

However, whenever I clicked on the header icons and hovered out of them, the background reverted to a solid white color, which did not work as my header is dark and my icons are set to white. So on hovering out of them (after a click), they would show as a solid white rectangle). To fix this, all I had to do was also set the state for “a”, not just “a:hover” as in the above posts (#93bb54 being the same color as my header):

.d-header-icons .d-icon {
color: white !important;
}

.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
} 

.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}

Voila!

Denis_Heraud · 2019 年 12 月 18 日午後 6:43

Hey @awesomerobot, why doesn’t

.d-header-icons .d-icon {
color: white !important;
}

work on other icons like this envelope icon in a conversation, which is also d-icon if I inspect the element?

Screen Shot 2019-12-18 at 13.41.50

awesomerobot · 2019 年 12 月 20 日午後 3:23

.d-header-icons specifically refers to the nav on the right.

For the PM title icon, you’ll need

.extra-info-wrapper .private-message-glyph { color: red }

For other topic statuses, like pins and locked topics you can use

.extra-info-wrapper .topic-statuses .d-icon { color: red; }

brikohler · 2019 年 12 月 24 日午後 7:30

I added some custom icons in SVG, but I can’t change their color using CSS. They are always black. I can change the opacity, size … but never the color.

I tried using the above examples, but none returned the expected result.

.list-controls .btn .d-icon{
   color: #2CC3D5 !important;
   opacity: 0.5;
}

I tried for the header icons too.

What am i doing wrong?

awesomerobot · 2020 年 1 月 6 日午後 4:10

アイコンの SVG コードにインラインで色定義が含まれていますか？おそらく以下のような形になるでしょう：

その場合、その定義を削除するか、値を currentColor に変更してください。

hjalali · 2020 年 4 月 3 日午前 9:02

みなさん、こんにちは。
以下の状況で問題が発生しています：

メニューをクリックすると（ここまでは問題ありません）
マウスを離すと、背景と同様にアイコンの色も変化させる必要があります。そうしないと、アイコンが白い背景に隠れてしまいます：

Canapin · 2020 年 4 月 3 日午前 9:25

以下をお試しください:

.drop-down-mode .d-header-icons .active .icon {
    background: black;
}

Juless · 2020 年 8 月 22 日午前 11:28

特定のアイコンの CSS を変更するにはどうすればよいですか？

<svg class="fa d-icon d-icon-bolt svg-icon svg-node" aria-hidden="true"><use xlink:href="#bolt"></use></svg>

これが CSS でスタイルを適用したいアイコンです。

neounix · 2020 年 8 月 22 日午前 11:52

はい、@Juless さん

このような非常に具体的な CSS セレクターは機能するはずですが、通常そこまで細かく指定する必要がないため、ほとんど使われません：

svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
  /* ここにあなたのクールな CSS を記述 */
}

ただし、実際には、このシンプルなセレクターで十分機能するはずです：

svg.d-icon-bolt{
   /* ここにあなたのクールな CSS を記述 */
}

お役に立てれば幸いです。

場合によっては、これでもなんとかなるかもしれません：

.d-icon-bolt{
   /* ここにあなたのクールな CSS を記述 */
}

Juless · 2020 年 8 月 22 日午後 12:01

neounix:

このような非常に具体的な CSS セレクターは機能しますが、通常はここまで詳細に指定する必要がないため、あまり使用されません。
svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
  /* ここにあなたの素晴らしい CSS を記述 */
}

これを使用したら、完璧に動作しました。@neounix さん、本当にありがとうございました。非常に助かりました。

401Ott · 2020 年 9 月 13 日午前 3:12

Sentinelrv と同じ状況です。header_primary を白に変更し、すべてのテーマに推奨されるカスタム CSS を適用しましたが、拡大鏡アイコンとハンバーガーメニューは依然としてグレーのままです。

lejeczek · 2023 年 9 月 16 日午前 6:53

私もハンバーガー/バーメニューの色を変更できません。検索/検索アイコンは変更されました。上記で述べたヒントをすべて試しましたが、（ウェブ開発者ではないため）失敗しました。誰か解決策を知っていますか？

Lilly · 2023 年 9 月 16 日午後 3:06

テーマまたはテーマコンポーネントの common-css で、右側のヘッダーアイコンの場合：

.d-header .d-header-icons .d-icon  {
    color: <ヘッダーアイコンの色> !important;
    &:hover {
        color: <ヘッダーアイコンのホバー時の色> !important;
    }
 }

サイドバーメニューモードのハンバーガーアイコンの場合：

.d-header .header-sidebar-toggle button .d-icon {
    color: <ハンバーガーアイコンの色> !important;
    &:hover {
        color: <ハンバーガーアイコンのホバー時の色> !important;
    }
}

<ヘッダーアイコンの色>、<ハンバーガーアイコンの色>、<ヘッダーアイコンのホバー時の色>、<ハンバーガーアイコンのホバー時の色> = 16進数、カラー名、またはテーマカラー変数。アイコンの背景色を変更したい場合は、background-color を指定することもできます。

注：サイドバーではなくハンバーガーのドロップダウンモードを使用している場合、右側のヘッダーアイコン用の最初のスニペットにもハンバーガーアイコンが含まれます。

トピック		返信	表示
How can I change Header icons color with hamburger button Development css	4	449	2024 年 3 月 28 日
Customizing colors of header icons Development	5	832	2023 年 7 月 4 日
Issue with discourse header icon colours Development	4	101	2024 年 8 月 25 日
How to make Navbar SVG icons white? Development css	7	642	2024 年 3 月 27 日
Site header icons don't use header primary color Bug	8	823	2019 年 2 月 4 日

ヘッダーアイコンの色を変更する方法は？

関連トピック