Bootstrap5 图标字体粗细

Question

我最近直接从 3 更新到 bootstrap 5。是的，我跳过了 4。

事情是这样的，早在 3 年前，我就做过这样的事情。

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

但正如我所说，这是行不通的。

为什么？有办法实现这一点吗？

Answer 1

I have been testing the Bootstrap 5 and font-weight did not work with "Bootstrap 5 icon <i></i>". But using -webkit-text-stroke will be get look like font-weight result.

Please try this.

    <i class="bi bi-asterisk"></i>
    <style> i:hover { -webkit-text-stroke: 1px; } </style>

It work at Bootstrap 5.