I wanted to use Bootstrap icons next to text to help differentiate options/items in a simple webpage I'm designing, but the <svg>
elements are slightly off relatively to the text. I'm using Bootstrap 4.0.0 with a personal css file to tweak a couple of things.
Both the HTML and CSS I used are in https://www.codeply.com/p/MU4zE84NJc, where the problem can be seen in the table items. It's minimal but I can't leave it unsolved.
Any idea how can I make sure the <svg>
elements stay aligned with the text?
Try using "vertical-align" property to svg element.
Like text-bottom, text-top
svg {
vertical-align: text-bottom;
}