如何将 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 “健全性测试”是，当 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 个小时 :upside_down_face: background-color 是我之前尝试过的东西之一，并且一直在摆弄 Inspect Element，但仍然无效。几个小时后我回家时会尝试“important”这个方法，然后留个更新！是的，它们是 100% 的 .SVG 链接。

7

哎呀，听起来真让人沮丧！

另一种有助于排查问题的技巧是直接在检查器中向元素添加样式，看看是否有效（使用样式选项卡中的 element.style 部分）。注意：这些更改是临时的，只会影响当前窗口，刷新后就会被删除。

image
image592×155 21.2 KB

8

这是我的图标，这是它们的“检查元素”：

bbbb
bbbb720×375 20.8 KB

我尝试了您列出的所有 CSS 代码，包括尝试“stroke”和“fill”。“!important”方法也无效。我不知道是什么原因造成的。
不过，我可能发现了一些问题。我注意到，尽管我使用的是 .SVG “图像”，但“检查元素”仍然将它们显示在 <img> 标签中，而不是像您的那样显示在 <svg class=" 中。这是 Custom Header Icons 的一个 bug 吗？

9

啊哈，是的，看起来这就是为什么更改不起作用的原因——实际上没有 <svg> 标签。我不认为组件将其放入 <img> 标签是一个错误。这只是显示 SVG 的一种方式，但确实使样式设置更加困难。如果您可以访问 SVG 文件本身，您可以在那里更改描边或填充颜色（它将是一个像 stroke="black" 这样的属性，并且可能不止一个）。

如果您无法编辑 SVG，可以尝试使用 CSS 滤镜。这些滤镜可以为元素添加某些视觉效果。由于它们现在似乎是黑色的，我们可以尝试反转它们以获得白色。

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

请注意，选择器现在需要是 img 而不是 svg

2 个赞