这是我们论坛目前的模样…
我们将重新设计配色方案。页头将变为绿色，并配有白色的页头标志。
我遇到了一个问题：如何更改页头中放大镜图标和汉堡菜单图标的颜色？它们目前是灰色的，在绿色页头背景上会显得非常不协调。将这些图标改为白色也能与新的页头标志相匹配。
我已在主题菜单中查找，看到一个名为“页头主色”（header primary）的选项，其描述称它可以更改网站页头中的文本和图标颜色。然而，我已经将其设置为白色，但没有任何变化。是否有其他方法可以更改这两个图标的颜色？
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
}
}
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?
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;
}
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;
}
嘿，自从你提出建议后，情况有所变化。我不太确定原因，但这对我也行不通。CSS 样式表如下：
.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;
}
图标和悬停效果看起来是这样的——无论我将图标或悬停设置成什么颜色，都无法生效：
当我检查元素时，显示样式确实存在，但不知为何没有级联生效。有什么建议吗？
我已经安装了自定义页眉，但这应该不会造成任何改变，对吧？
非常感谢
更新：以下代码已生效，@tophee 这应该也能解决你的问题：
.d-header-icons .d-icon {
color: black !important;
}
.d-header-icons a:hover {
background-color: #346A77 !important;
}
感谢提供代码。
我发布此帖是希望避免其他人遇到与我相同的问题。根据您为标题栏和图标所使用的颜色组合（我的标题栏是深色），使用您提供的代码，我的图标颜色搭配是正确的：
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
但是，每当我点击标题栏图标并移开鼠标后，背景会恢复为纯白色，这与我的深色标题栏和白色图标不协调。因此，在点击后移开鼠标时，图标会显示为一个纯白色的矩形。要解决此问题，我只需为“a”状态也设置样式，而不仅仅是像上述帖子中那样仅设置“a:hover”（#93bb54 与我的标题栏颜色相同）：
.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;
}
搞定！
嘿 @awesomerobot，为什么这段代码
.d-header-icons .d-icon {
color: white !important;
}
对其他图标（比如对话中的这个信封图标）不起作用？我检查元素后发现它也是 d-icon。
.d-header-icons 特指右侧的导航栏。
对于私信标题图标，您需要使用
.extra-info-wrapper .private-message-glyph { color: red }
对于其他话题状态，如置顶和锁定话题，您可以使用
.extra-info-wrapper .topic-statuses .d-icon { color: red; }
我添加了一些自定义的 SVG 图标，但无法通过 CSS 更改它们的颜色。它们始终显示为黑色。我可以调整透明度、大小……但就是无法改变颜色。
我尝试了上面的示例，但没有一个能达到预期效果。
.list-controls .btn .d-icon{
color: #2CC3D5 !important;
opacity: 0.5;
}
我也尝试了针对标题图标的设置。
我哪里做错了？
图标是否在 SVG 代码中内联定义了颜色？它看起来可能像这样：
如果是这样，您可以选择将其移除，或将值更改为 currentColor。
尝试：
.drop-down-mode .d-header-icons .active .icon {
background: black;
}
如何更改特定图标的 CSS？
<svg class="fa d-icon d-icon-bolt svg-icon svg-node" aria-hidden="true"><use xlink:href="#bolt"></use></svg>
这是我想要应用 CSS 的图标。
给你，@Juless
这类非常具体的 CSS 选择器应该可以工作，但很少被使用，因为通常没有必要如此具体：
svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
/* 你酷炫的 CSS 代码在这里 */
}
不过，实际上，这个简单的选择器应该就能正常工作：
svg.d-icon-bolt{
/* 你酷炫的 CSS 代码在这里 */
}
希望这能帮到你。
你甚至可以用这个“应付”一下：
.d-icon-bolt{
/* 你酷炫的 CSS 代码在这里 */
}
我使用了这个选择器，效果非常好。感谢 @neounix，真的很有帮助。
我和 Sentinelrv 遇到了同样的情况。我已将 header_primary 调整为白色，并在每个主题中应用了推荐的自定义 CSS，但放大镜图标和汉堡菜单仍然是灰色的。
我也无法更改汉堡/条形菜单的颜色，搜索/查找图标已更改 - 我尝试了所有上述技巧以及更多技巧，通过在网络浏览器中检查内容，但我（不是网页开发者）失败了。有谁弄明白了？
对于右侧的标题图标，在主题或主题组件的 common-css 中：
.d-header .d-header-icons .d-icon {
color: <header icons color> !important;
&:hover {
color: <header icons hover color> !important;
}
}
对于侧边栏菜单模式下的汉堡包图标：
.d-header .header-sidebar-toggle button .d-icon {
color: <hamburger icon color> !important;
&:hover {
color: <hamburger icon hover color> !important;
}
}
<header icons color>、<hamburger icons color>、<header icon hover color>、<hamburger icon hover color> = 十六进制、颜色名称或主题颜色变量。您也可以指定 background-color 来更改图标背景颜色。
注意：如果您使用的是汉堡包下拉模式而不是侧边栏，则右侧标题图标的第一个代码片段也将包含汉堡包图标。