brijazz
1
When I call a boostrap icon using <i class="bi bi-dash">
, it centers itself vertically alongside accompanying text, as seen here:
![image](https://elixir.support/uploads/default/original/2X/b/b968c18903495827973667156c34f554b96b6669.png)
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:
![image](https://elixir.support/uploads/default/original/2X/d/dd31dcfbaf0f3ca6c68a3f49d5302b152440f59e.png)
Any suggestions on how to get the larger icon and have it vertically-centered?
brijazz
2
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;}
2 Likes
system
Closed
3
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.