Bootstrap 4固定顶部导航栏SVG图标颜色设置问题求助

我来帮你搞定这个头疼的图标颜色问题！你说用了fill和color都没效果，大概率是图标类型或者样式优先级的问题，咱们分情况解决：

如果你用的是SVG图标 #

直接在<img>标签上加fill确实没用，因为<img>加载的SVG是独立的文档，外部样式穿不进去。给你两个实用方案：

• 方案1：把SVG代码直接嵌到页面里
  别用<img>引用了，把SVG的源码直接放到<navbar-brand>里，这样就能直接用fill控制颜色了，示例代码：

  <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
    <div class="navbar-brand">
      <svg style="fill:white; width:32px; height:32px;" viewBox="0 0 24 24">
        <!-- 这里替换成你自己的SVG路径代码 -->
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
      </svg>
    </div>
  </nav>
  

• 方案2：用CSS滤镜“变色”
  要是必须用<img>引用SVG，就用filter属性来转颜色，比如转成白色：

  <img style="filter: brightness(0) invert(1); width:32px; height:32px;" src="你的SVG图标路径" />
  

  这个思路是先把图标压成黑色，再反转成白色，适合单色图标，效果很稳。

如果你用的是PNG/JPG这类位图 #

位图根本不吃fill属性这一套，两种解决办法：

• 直接用白色版本的图标文件；
• 同样用上面的filter滤镜来变色，代码和SVG方案2一样，亲测有效。

要是Bootstrap样式压过了你的自定义样式 #

有时候Bootstrap的内置样式优先级更高，你可以给图标加个自定义类，比如navbar-icon，然后写个优先级更高的CSS：

.navbar-dark .navbar-brand .navbar-icon {
  fill: white !important; /* 或者用filter: brightness(0) invert(1); */
}

⚠️ 提醒一下：!important尽量少用，但紧急解决问题的时候可以先救个急，之后再调整样式结构优化优先级。

最后别忘了检查你的CSS引入顺序，一定要把自己的自定义CSS放在Bootstrap的CSS之后，这样你的样式才能覆盖默认样式哦～

内容的提问来源于stack exchange，提问作者farhany