我正在尝试使用图标内导航链接在一个边栏,使用 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
1条答案
按热度按时间bmp9r5qi1#
要使用Bootstrap图标并允许像普通文本一样对它们应用样式,您需要通过
<i>
标记来使用它们:<i class="bi-github" role="img" aria-label="GitHub"></i>
。否则,使用CSS color filter来更改SVG的颜色。