Bootstrap 图标不会改变颜色

qv7cva1a  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(248)

我正在尝试使用图标内导航链接在一个边栏,使用 Bootstrap V5和 Bootstrap 图标。
我声明的图标如下:

<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>

文本本身确实呈现为白色,但图标本身仍然是黑色的。即使我显式地使用fill: #fff; color: #fff样式化图像标签,图标仍然是黑色的。有没有办法在不修改SVG本身的情况下对其进行样式化?
Bootstrap文档显示,应用一个text-white类应该足以设计图标的样式:https://icons.getbootstrap.com/#styling

bmp9r5qi

bmp9r5qi1#

要使用Bootstrap图标并允许像普通文本一样对它们应用样式,您需要通过<i>标记来使用它们:<i class="bi-github" role="img" aria-label="GitHub"></i>。否则,使用CSS color filter来更改SVG的颜色。

相关问题