这是我们论坛目前的模样…
我们将重新设计配色方案。页头将变为绿色，并配有白色的页头标志。
我遇到了一个问题：如何更改页头中放大镜图标和汉堡菜单图标的颜色？它们目前是灰色的，在绿色页头背景上会显得非常不协调。将这些图标改为白色也能与新的页头标志相匹配。
我已在主题菜单中查找，看到一个名为“页头主色”（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
}
}
10 个赞
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;
}
8 个赞
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;
}
4 个赞
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
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;
}
4 个赞
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!
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?
.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; }
5 个赞
我添加了一些自定义的 SVG 图标，但无法通过 CSS 更改它们的颜色。它们始终显示为黑色。我可以调整透明度、大小……但就是无法改变颜色。
我尝试了上面的示例，但没有一个能达到预期效果。
.list-controls .btn .d-icon{
color: #2CC3D5 !important;
opacity: 0.5;
}
我也尝试了针对标题图标的设置。
我哪里做错了？
图标是否在 SVG 代码中内联定义了颜色？它看起来可能像这样：
如果是这样，您可以选择将其移除，或将值更改为 currentColor。
3 个赞
尝试：
.drop-down-mode .d-header-icons .active .icon {
background: black;
}
2 个赞
如何更改特定图标的 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 代码在这里 */
}
2 个赞
我使用了这个选择器，效果非常好。感谢 @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 来更改图标背景颜色。
注意：如果您使用的是汉堡包下拉模式而不是侧边栏，则右侧标题图标的第一个代码片段也将包含汉堡包图标。
4 个赞