CODEWITHSUNDEEP
cssmaterialize
Alaister Young
Alaister Young

Reputation: 357

Materialize icon positioning

I have a side menu using Materialize CSS. It has three menu items in it, each with an icon. My problem is the icon sits too high - the base of the icon is in line with the base of the text. I want it to be so the icon is in the middle of the text vertically. Here is how my lis look:

<li class="logout-btn"><a href="#"><i class="material-icons">power_settings_new</i> Logout</a></li>

And here is what it looks like in the sidebar nav:

enter image description here

If anyone knows a fix that would be great!

Upvotes: 1

Views: 2143

Answers (2)

Skipp
Skipp

Reputation: 1

change from:

<i class="material-icons">

to:

<i class="material-icons left">

more info can be found here: https://materializecss.com/buttons.html

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Try with vertical align

 i.material-icons {
      vertical-align: middle;
 }

If this doesn't work, try to wrap into a span the text

<i class="material-icons">power_settings_new</i> <span>Logout</span>

And then in the CSS

 i.material-icons , i.material-icons + span {
      vertical-align: middle;
 }

Upvotes: 6

Related Questions