Align SVG Icons Vertically with Text

That Guy · 23 May 2020 at 22:48

So making a simple Intranet page for work, I’m using Bootstrap and all is going great, problem I’m having is aligning the SVG Icons from the Bootstrap website.

Example:

Code:

<svg class="bi bi-exclamation-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>

I paste the above code next to any text and the vertical alignment is off (see below screenshots) even. I change the size off the icon.

I have tried a few code snippets from around the web but not found a fix, any have any ideas?

Dup · 24 May 2020 at 03:45

Fonts can have some white space, try setting a smaller line height for it (equal to font size maybe) and make sure there's no margin on it.

For buttons you could set the parent container to display:flex and align-content: center to get things playing nicely. Flexbox is IE 10 plus only though of that's a concern.

That Guy · 24 May 2020 at 09:58

Dup said:
Fonts can have some white space, try setting a smaller line height for it (equal to font size maybe) and make sure there's no margin on it.

For buttons you could set the parent container to display:flex and align-content: center to get things playing nicely. Flexbox is IE 10 plus only though of that's a concern.

Thanks for the suggestions sadly doesn’t fix the issue

touch · 26 May 2020 at 18:24

I think the vertical align class in bootstrap is "align-middle". Add that to the svg element - and you might also need it on the text, too.

Hawk Tuah · 26 May 2020 at 18:37

There must be something in your styling causing it. You need to set the vertical align property in your classes to suit.

Eg https://jsfiddle.net/x9fswgvr/1/

ChroniC · 27 May 2020 at 00:36

If you've tried the flex options then this is what I always do to fix that
Or as 9 times out of ten, the icon has a weird line height or extra space I can never remove, I apply position: relative, top: -2px

That Guy · 30 May 2020 at 10:27

Thanks for the help peeps, the only reliable solution I found that worked consistently was to add the following styling to the SVGs in question:

Code:

margin-bottom: 4px;

Not sure if this is the correct way of doing it but seems to work Ross browser.

dav3evans · 24 Jun 2020 at 00:13

I've added Bootstrap as a basis to this Codepen, and without adding any styles the SVG is too high, rather than too low, but the flex approach of align-items: center works for me. Dup was along the right lines, but I think align-content is for the rows of items rather than the actual items themselves.

Linky: https://codepen.io/dav3evans/pen/mdVmzwW