Bootstrap Icon Sizing

When I call a boostrap icon using <i class="bi bi-dash">, it centers itself vertically alongside accompanying text, as seen here:


However, when I try to increase the size of the icon using <i class="bi bi-dash" style="font-size: 2em"> it floats to the top:


Any suggestions on how to get the larger icon and have it vertically-centered?

For anyone who stumbles across this, I solved my issue by assigning a class to any icons that I wanted to ‘upsize’ and added styling in my CSS.

<i class="bi-vertical-center bi-dash" style="font-size: 2em;" class="align-middle;"></i>OUR LESSONS

.bi-vertical-center {vertical-align: middle;}


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.