I have tried everything. Bootstrap 5 + Bootstrap Icons. In a <p> tag, I cannot get the icons vertical aligned to the text

Question

I am trying to do something really simple.

I have a some text and a bootstrap icon wrapped in a <p> tag.

I cannot manage to vertical align the icon to the text. The icon always displays lower than the text.

I have searched everywhere and tried all the solutions proposed for similar cases, but nothing works.

The code I am using is exactly the same that bootstrap icons use to showcase their icons here.

You can see from my screenshot what the problem is:

The icon is not vertical aligned to the text.

Here is how it should look like:

The weird thing is that if I set vertical-align: 1px; to the icon itself, the problem seems to be fixed. But this should not be the solution and this should work with bootstrap out of the box.

What am I doing wrong?

Here is my code:

<div class="d-flex justify-content-between">
   <p class="small">
      Combined data
   </p>
   <p class="small">Refresh data <i class="bi bi-linkedin"></i></p>
</div>

Thanks for your help.

question from:https://stackoverflow.com/questions/65857531/i-have-tried-everything-bootstrap-5-bootstrap-icons-in-a-p-tag-i-cannot-g

Answer 1

Waitting for answers