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:

 Cancel

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:


     Cancel

yielded in a button looking like this:

@George:

 Cancel

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:

So I could mark this as the correct answer. Nevertheless I'm wondering why the -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:

Cancel

user_14855488 · Answer

I think it can help you.

Cancel

user_5475791 · Answer

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

user_13292381 · Answer

HTML

     
      
            Cancel

Css

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

user_15751372 · Answer

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

bootstrap icons are not vertically aligned in button

4 Answers