Align SVG Icons Vertically with Text

Associate
Joined
31 Jan 2010
Posts
282
Location
UK
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?


50361-F8-A-3393-4951-ADF0-37-DBC4971-FAF.jpg


C876-A9-E5-485-F-4-CF9-9624-1-AF09960450-F.jpg
 

Dup

Dup

Soldato
Joined
10 Mar 2006
Posts
11,225
Location
East Lancs
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.
 
Associate
OP
Joined
31 Jan 2010
Posts
282
Location
UK
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 :(
 
Soldato
Joined
18 Oct 2002
Posts
10,042
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
 
Associate
OP
Joined
31 Jan 2010
Posts
282
Location
UK
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.
 
Associate
Joined
4 Jan 2011
Posts
2,094
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
 
Back
Top Bottom