bootstrap icons are not vertically aligned in button

Question

When I try to add the new bootstrap icons to a button, it seems that the image is somewhat off:

I could add a margin on the bottom but that seems to much of a "work around". If I inspect the code on: https://icons.getbootstrap.com/icons/x-circle/ they are also not using any workarounds but there it looks as expected.

This is how I add my button:

<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>

One slight difference I spotted is that if one gets the icon through the icon font instead of the svg, it adds some space on top of the image which I can't get rid off by any padding controls.

I followed the "installation" instructions step-by-step and other components work as expected. Also font-awesome works like a charm.

Any ideas how to get this right?

EDIT: thank you all for your replies so far. I went through all of them:

@vishal:

<div style="text-align:center; width:100%;">
    <a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
</div>

yielded in a button looking like this:

@George:

<a href="#" type="button" class="d-flex justify-content-center align-items-center col-12 btn btn-danger"><i class="bi bi-x-circle pr-2"></i> Cancel</a>

Here I had to extend col-1 to col-12. But also then it yielded this button:

@camaulay: if I use the svg and make an adjustment to width and height (set both to 20) and adjust the viewbox positioning to "0 0 20 20", the result actually looks as expected:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 20 20">

So I could mark this as the correct answer. Nevertheless I'm wondering why the <i>-Tag does result in such strange behaviour?

If I add the border class to the "picture" then one sees that there is some extra space on top of the image:

<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle pr-2 border"></i> Cancel</a>

Answer 1

Actually, in the official example there are some extra styles applied to bi class. The fix was introduced in this pull.

So the style itself is similar to this:

.bi {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}

You can see the effect on the second button below:

.bi {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
</svg>
                Cancel
</button>

<button type="button" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
</svg>
                Cancel
</button>

Answer 2

This is a known bug, see https://github.com/twbs/icons/issues/82. Sorry for bothering you.

Answer 3

HTML

    <div class="center"> 
      <a href="#" type="button" class="btn btn-danger">
           <i class="bi bi-x-circle"></i> Cancel
      </a>
    </div> 

Css

 .center { 
    text-align:center; 
    width:100%; 
} 

Answer 4

I think it can help you.

<a href="#" type="button" class="d-flex justify-content-center align-items-center col-1 btn btn-danger"><i class="bi bi-x-circle"></i>Cancel</a>