bootstrap-5bootstrap-icons

Bootstrap5 icons font-weight

I recently updated to bootstrap 5 directly from 3. Yes, I skipped 4.

Thing is, back in 3, I used to do something like this.

<i class="glyphicon glyphicon-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

Now, with bootstrap5's icons, that doesn't work!

Obviously, I'm now using the new icons.

<i class="bi bi-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

But as I said, it doesn't work.

Why? Is there a way to achieve this?

Solution

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