5

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?

onzinsky
  • 541
  • 1
  • 6
  • 21

4 Answers4

10

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.

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
Andrew Kin Fat Choi
  • 326
  • 3
  • 8
4

font-weight does not work with the Bootstrap 5 Icon Font.

As the Bootstrap Icon documentation mentions, styling is very limited.

Styling Color can be changed by setting a .text-* class or custom CSS

You can apply a hack by using the non-standard -webkit-text-stroke, which will resemble bold text.

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

Warning about bold on hover

This hack does not behave the same as real bold, as it does not change the character’s size. Because font-weight does change the text flow, it should be avoided on hover, as text might shift or even wrap while hovering.

Warnings on Accessibility

See also Accessibility considerations for Bootstrap Icon

If you want to style hover for an element, it indicates that you probably have some interaction bound to it. Interactive elements need to fit several criteria to be usable by people with disabilities or keyboard fans:

  • It needs to be obvious that one can interact with it, visually
  • That also needs to be indicated by means of the element’s role, like button or link, to be exposed to assistive technology
  • Interaction needs to work with the keyboard as well, being focusable
  • To know what activating the element does, it needs an accessible name

For this case it’s best to wrap the icon in a button:

<button type="button" class="btn btn-light" aria-label=""><i class="bi-asterisk"></i></button>
<style>
  .btn:hover { -webkit-text-stroke: 1px }
</style>
Andy
  • 4,783
  • 2
  • 26
  • 51
2

This is a simple misunderstood concept of font and how they work.
The Icons are made of a font, so the same concept is working here too.

Normally when you set something bold with font-weight the browser will not actally just make the font a bit bigger. NO they will replace the complete font with a similar font. As an example: Aria to Aria Bold. A high quality font should come with atleast 3 or better 6 versions (Light, Normal, Bold x cursive, non-cursive)

When the browser can't find a font for another font-weight version , it tries to guess how it should look like. The same with font-style.

See the difference in italic and oblique in the docs as an example: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

So how should your icon letter should look like bold or light? Why did it work on the older bootstrap version? Don't know really. Maybe some font intern settings or css decleration. But one is sure: You should not use this rule for icons (which not support them, FontAwesome supports it btw.).

One similar approach is to use transform: scale(1.05) to resize the DOM Element. Using scale(2) would double its size.

Sysix
  • 1,572
  • 1
  • 16
  • 23
  • Thanks for this! I kind of remember now that I worked with fonts a while back. I did some inspecting and still can't figure out the difference in approach between bootstrap 5 and bootstrap 3's icons. I tried the transform scale stuff and the problem is it makes the icon larger but it doesn't make it thicker which is what I'm trying to accomplish. I'll use that as a workaround while I keep looking. Thanks again! – onzinsky Dec 26 '21 at 10:51
  • @onzinsky maybe `text-shadow` without blur value could be the solution – Sysix Dec 30 '21 at 21:39
  • that’s a better workaround indeed! Thanks! – onzinsky Dec 31 '21 at 09:49
  • Thanks for the explanation and the solution with tools of the official standard. Maybe you should put `transform: scale(2)` at the beginning of your answer as solution. – Ruben Jul 26 '23 at 09:15
0

This worked with me when working with react

stroke: white; stroke-width: 3px;

Yousef
  • 119
  • 2
  • 8