我最近直接从3更新到bootstrap 5。是的，我跳过了4。
问题是，在三年前，我曾经做过这样的事情。
<i class="glyphicon glyphicon-asterisk"></i>
<style> i:hover { font-weight: bold; } </style>
现在，有了bootstrap5的图标，这行不通！
很明显，我现在正在使用新图标。
<i class="bi bi-asterisk"></i>
<style> i:hover { font-weight: bold; } </style>
但正如我所说，它不起作用。
为什么？有办法做到这一点吗？
我一直在测试Bootstrap 5，字体重量不适用于"引导5图标<i></i>"；。但使用-webkit-text-stroke会得到类似font-weight的结果。
请试试这个
<i class="bi bi-asterisk"></i>
<style> i:hover { -webkit-text-stroke: 1px; } </style>
它在Bootstrap 5中工作。
font-weight不适用于引导程序5图标字体。
正如Bootstrap Icon文档中提到的，样式非常有限。
样式可以通过设置.text-*类或自定义CSS 来更改颜色
您可以使用类似粗体文本的非标准-webkit-text-stroke进行破解。
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" rel="stylesheet" />
<style>
.bi-hover-bold:hover {
-webkit-text-stroke: 1px;
}
</style>
<p>
<i class="bi-asterisk bi-hover-bold" role="img" aria-label="Required"></i> Bold-like on hover
</p>
<p>
<i class="bi-asterisk" role="img" aria-label="Required"></i> Normal, for comparison
</p>悬停时粗体的警告
这个破解的行为与真正的粗体不同，因为它不会改变角色的大小。因为font-weight确实会更改文本流，所以应该避免在悬停时更改，因为悬停时文本可能会移动甚至换行。
无障碍警告
另请参阅引导图标的可访问性注意事项
如果你想为一个元素设置悬停样式，这表明你可能与它绑定了一些交互。交互元素需要符合几个标准才能被残疾人或键盘迷使用：
- 需要明显的是，人们可以在视觉上与它互动
- 这也需要通过元素的角色来表明，比如
button或link，以接触辅助技术 - 交互也需要使用键盘，以便集中注意力
- 要知道激活元素的作用，它需要一个可访问的名称
对于这种情况，最好将图标包装在按钮中：
<button type="button" class="btn btn-light" aria-label=""><i class="bi-asterisk"></i></button>
<style>
.btn:hover { -webkit-text-stroke: 1px }
</style>
这是对字体及其工作方式的一个简单误解
图标是由字体组成的，因此相同的概念在这里也适用。
通常情况下，当你用font-weight设置粗体时，浏览器实际上不会只是让字体变大一点。否，他们将用类似的字体替换完整的字体。例如：Aria到Aria Bold。一个高质量的字体应该至少有3个或更好的6个版本(浅色，普通，粗体x草书，非草书(
当浏览器找不到另一个font-weight版本的字体时，它会尝试猜测它应该是什么样子。与font-style相同。
以文档中italic和oblique的差异为例：https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
那么，你的图标字母应该如何看起来像粗体或浅色呢？为什么它在旧的引导程序版本上有效？真的不知道。也许是一些字体实习生设置或css删除。但有一点是肯定的：你不应该对图标使用这个规则(不支持它们，FontAwesome顺便支持它(
一种类似的方法是使用transform: scale(1.05)来调整DOM元素的大小。使用scale(2)将使其大小加倍。
在使用react 时，这对我很有用
笔划：白色；笔划宽度：3px；