I've been tryna make a website, I use bootstrap icons library for my icons and I've been going throught a problem that doesn't seems to be fixable. I cannot find any answers on StackOverflow or Google (or any other websites).
The thing is that Bootstrap Icons allows us to use their font with elements to make sizing and coloring easier with css properties (font-size, color, etc..). They use a ::before inside of the element with a class "bi bi-".
But the problem is that the element doesn't have the same size as the ::before.
So on any projects, it can be fine, but when using a "squared" icon like bi bi-0-square we got a 16x24 size instead of a 16x16 size that the icon have (inside of the ::before).
I use it on a button only with an icon and it is not centered correctly due to the fact that the isn't a square.
I tried a quick messy fix: setting the width and height to 16px on the specific element. But it ain't that good cause I wanna have every icon to be a proportionated size (the ::before size).
How to reproduce?
Simply create a HTML file and import bootstrap-icons inside of it.
Then add a element that is supposed to be a square.
<i class="bi bi-0-square"></i>
If you inspect that element, you'll see that the height of it is 24 and the width is 16. But if you look at the ::before pseudo-element, it has a 16x16 size.
I was expecting to have a that has the same size as its ::before so it can be a square or any other things that I can easily center and add inside of buttons. Screen of the size Screen of the ::before size
