Navbar SVGアイコンを白くする方法

開発
1

カスタムヘッダーアイコンコンポーネントを使用しています。
wwww

これらを白くしたいです。

2

コンポーネントは、各アイコンを保持するために custom-header-icon-link クラスを持つ要素を使用しているようです。SVG アイコンを使用している場合、次のようにターゲットにできます。

.custom-header-icon-link svg {
    stroke: white;
}

SVG は線でできているように見えることがありますが、実際には塗りつぶされた形状でできている場合があるため、stroke: white を fill: white に変更する必要があるかもしれません。

「いいね！」 1
3

こんにちは、どちらの方法を試しても、次のように表示されます。
wwww
提供されたCSSを使用しても、何も変更されませんでした。

5

うーん、何が起こっているのかよくわかりません！アイコンが SVG で画像ファイルではないことを確認するために、再確認することをお勧めします。他のスタイルが上書きしている可能性があるので、stroke: white !important; を試すこともできます。

CSS が何もしていないように見えるときの「健全性チェック」として、セレクターに background-color を追加することがよくあります。

.custom-header-icon-link svg {
  background-color: pink;
  stroke: white;
}

これにより、背景色が見えない場合、問題はセレクターが正しい要素をターゲットにしていないことである可能性があります。この場合、ブラウザのインスペクターツールは、要素の階層を確認し、セレクターの記述方法をよりよく理解できるため非常に便利です。

Chrome では、Ctrl+Shift+C を押してアイコンをクリックすると、リスト内のその要素にジャンプします。要素タブのスクリーンショットを投稿していただければ、どのように整理されているかを確認できます。たとえば、コンポーネントをプレビューで試した場合、私には次のように表示されます。

image
image424×184 18.5 KB

6

家に帰ったら試してみます。もう8時間もこれを機能させようとしていますが、ダメです🙃 background-colorは以前試したことの一つで、Inspect Elementをずっといじっていましたが、まだうまくいきませんでした。数時間後に家に帰ったら「important」を試してみて、アップデートします！はい、それらは100% .SVGリンクです。

7

ああ、それはイライラしますね！

トラブルシューティングに役立つもう1つのテクニックは、インスペクターで直接要素にスタイルを追加して、それが機能するかどうかを確認することです（スタイルタブのelement.style部分を使用します）。注意：これらは現在のウィンドウにのみ影響し、更新すると削除される一時的な変更です。

image
image592×155 21.2 KB

8

アイコンと、それらのインスペクト要素は次のとおりです。

bbbb
bbbb720×375 20.8 KB

リストされているすべてのCSSコーディングを試しましたが、「stroke」と「fill」の両方を試しました。「!important」も機能しませんでした。何が原因なのか全く分かりません。
しかし、何かを発見したかもしれません。SVG「画像」を使用しているにもかかわらず、インスペクト要素には、 yours が表示する <svg class=" ではなく、 <img> タグで表示されていることに気づきました。これはCustom Header Iconsのバグでしょうか？

9

なるほど、それなら変更が何も効果がなかった理由がわかります。実際には <svg> タグがありませんでした。コンポーネントが <img> タグに入れたのはバグではないと思います。SVG を表示する方法の 1 つですが、スタイル設定が難しくなります。SVG ファイル自体にアクセスできる場合は、そこでストロークまたは塗りつぶしの色を変更できます（stroke="black" のような属性になり、複数存在する可能性があります）。

SVG を編集できない場合は、CSS フィルターを試すことができます。これにより、要素に特定の視覚効果を追加できます。現在黒く表示されているため、反転して白にすることができます。

.custom-header-icon-link img {
  filter: invert(100%);
}

セレクターは SVG の代わりに img にする必要があることに注意してください

「いいね！」 2