How do I vertically align these icons within my nav menu CSS

Question

I have a nav menu in my website and I am using third party libraries for icons (Material/FontAwesome).

I am having issues with the icons not being able to vertically align with the anchor text. If I set the icon font size to be the size that I want then it seems to be higher than my text but I cannot seem to add any padding or margin (or any other positioning) without it pushing the whole anchor tag with it i.e not just the icon.

I have found a solution which you can see in my css (commented out). Where I decrease the font-size and then use transform and scale to get the desired outcome but I really think I should be able to just move the icon without doing this?

#nav-bar {
  background-color: #eee;
  height: 60px;
  display: flex;
  justify-content: center;
}

ul,
li {
  list-style: none;
}

#nav {
  font-family: "Poppins", Verdana, Arial, sans-serif;
}

#nav li.level1 {
  float: left;
  cursor: pointer;
}

#nav a {
  font-weight: normal;
}

#nav a.level1 {
  font-family: "Poppins", Verdana, Arial, sans-serif;
  color: #555;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
  margin-right: 50px;
  text-align: center;
  text-decoration: none;
  outline: none;
  padding: 10px 13px 9px;
  float: left;
}

#nav li.current a.level1 {
  color: red;
}

#nav ul {
  position: absolute;
  right: 0;
  bottom: -30px;
  display: none;
  width: 850px;
}

#nav ul li {
  float: right;
  margin-left: 27px;
}

#nav a.level1 i {
  font-size: 26px;
  font-weight: 600;
  color: #555;
  margin-left: 15px;
  /*font-size: 20px !important;
      transform: scale(1.2)*/
}

#nav li a span.material-icons,
#nav li a span.material-icons-outlined {
  margin-right: 15px;
  /*font-size: 15px;
  transform: scale(1.6)*/
}

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div id="nav-bar">
  <ul id="nav">
    <li class="level1" id="navApprovals">
      <a href="#" class="level1 home"><span class="material-icons">done_all</span>Approvals<i class="fa fa-angle-down"></i></a>
    </li>
    <li class="level1" runat="server">
      <a href="#" class="level1 home"><span class="material-icons-outlined">bug_report</span>Issues<i class="fa fa-angle-down"></i></a>
    </li>
    <li class="level1" id="navHome" runat="server">
      <a href="#" class="level1 home"><span class="material-icons-outlined">bookmarks</span>Reports<i class="fa fa-angle-down"></i></a>
    </li>
  </ul>
</div>

score 3 · Accepted Answer · answered Jan 25 '23 at 21:22

Remove all your float's and set a.level1 to display: flex; and use align-items: center; to vertically align them.

body {margin: 0;}
#nav-bar {
  background-color: #eee;
  height: 60px;
  display: flex;
  justify-content: center;
}

ul,
li {
  list-style: none;
}

#nav {
  font-family: "Poppins", Verdana, Arial, sans-serif;
  display: flex;
  align-items: center;
  padding-inline-start: 0;
  column-gap: 40px;
}

#nav li.level1 {
  cursor: pointer;
}

#nav a {
  font-weight: normal;
}

#nav a.level1 {
  font-family: "Poppins", Verdana, Arial, sans-serif;
  color: #555;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  outline: none;
  padding: 10px 13px 9px;
}

#nav li.current a.level1 {
  color: red;
}

#nav ul {
  position: absolute;
  right: 0;
  bottom: -30px;
  display: none;
  width: 850px;
}



#nav a.level1 i {
  font-size: 26px;
  font-weight: 600;
  color: #555;
  margin-left: 15px;
  /*font-size: 20px !important;
      transform: scale(1.2)*/
}

#nav li a span.material-icons,
#nav li a span.material-icons-outlined {
  margin-right: 15px;
  /*font-size: 15px;
  transform: scale(1.6)*/
}

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div id="nav-bar">
  <ul id="nav">
    <li class="level1" id="navApprovals">
      <a href="#" class="level1 home"><span class="material-icons">done_all</span>Approvals<i class="fa fa-angle-down"></i></a>
    </li>
    <li class="level1" runat="server">
      <a href="#" class="level1 home"><span class="material-icons-outlined">bug_report</span>Issues<i class="fa fa-angle-down"></i></a>
    </li>
    <li class="level1" id="navHome" runat="server">
      <a href="#" class="level1 home"><span class="material-icons-outlined">bookmarks</span>Reports<i class="fa fa-angle-down"></i></a>
    </li>
  </ul>
</div>

Thank you - easy solution. Not sure why I didnt think of that...Im a c# developer trying my hand in css and trying to update an existing site. Flexbox is basically the only thing I know and I still didnt think of it :) — glenho123, Jan 25 '23 at 21:58
Do you have a reason as to why I couldnt use padding/margin on the icons themselves? — glenho123, Jan 25 '23 at 21:58
We've all been there. `flex` is king! Are you referring to adding `padding` / `margin` on the icons themselves to vertically center them rather than flexing them? — Kameron, Jan 25 '23 at 22:00
yeah correct...every time I did that the whole anchor tag would move down? — glenho123, Jan 25 '23 at 22:05
@glenho123 it's because both the material icons and `fa` icons are `display: inline-block;`. This generates a block element, which is `a` in your instance, that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). Which is why any `padding` or `margin` affects the `a` as well. — Kameron, Jan 26 '23 at 15:11

How do I vertically align these icons within my nav menu CSS

1 Answers1