Bootstrap Icons无法变色？Bootstrap V5侧边栏图标样式问题

我在基于Bootstrap V5的侧边栏导航中使用Bootstrap Icons，代码如下：

<li class="nav-item">
    <a class="nav-link text-white">
        <img class="text-white" src="/img/journal-text.svg" width="16" height="16"/>
        Sidebar Link
    </a>
</li>

导航文本已成功显示为白色，但图标始终是黑色，即使给img标签添加fill: #fff; color: #fff样式也无效。想知道是否可以不修改SVG本身来调整图标颜色？Bootstrap文档显示添加text-white类即可实现图标样式调整。

问题核心在于你用<img>标签引入SVG：这种方式下SVG的填充色是内部定义的，外部CSS或text-white类无法直接覆盖。Bootstrap Icons文档中提到的text-white生效，是针对内联SVG或图标字体的使用场景。下面提供三种可行方案：

• 方案1：改用内联SVG
  把SVG文件的内容直接嵌入HTML，给SVG标签添加text-white类，并确保SVG内部的fill属性设为currentColor（继承父元素的颜色值）。示例代码：

<li class="nav-item">
    <a class="nav-link text-white">
        <svg class="text-white" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <!-- 替换为journal-text.svg中的路径等内容 -->
            <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
            <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
            <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
        </svg>
        Sidebar Link
    </a>
</li>

• 方案2：使用Bootstrap Icons字体类
  如果已引入Bootstrap Icons字体文件，直接用<i>标签搭配图标类和text-white，示例：

<li class="nav-item">
    <a class="nav-link text-white">
        <i class="bi bi-journal-text text-white" style="font-size: 16px;"></i>
        Sidebar Link
    </a>
</li>

这种方式下text-white的颜色样式会直接作用于图标字体，无需额外调整。

• 方案3：使用CSS滤镜（兼容img标签场景）
  如果必须保留<img>标签且不修改SVG，可通过filter: invert(1)将黑色图标反转成白色，示例CSS：

.nav-link img.text-white {
    filter: invert(1);
}

注意：此方法仅适合单色调图标，若图标包含其他颜色，反转后会出现异常，优先推荐前两种方案。

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