My website has a navigation menu with third-party icon libraries (Material/FontAwesome) in use.
I am facing an issue where the icons are not aligning vertically with the anchor text. Adjusting the font size of the icon to match the text results in it appearing higher than the text, but adding padding or margin shifts the entire anchor tag instead of just the icon itself.
https://i.stack.imgur.com/WhoQQ.png
In my CSS, I have come up with a workaround (commented out) where I reduce the font size and utilize transform and scale properties for the desired outcome. However, I believe there should be a simpler way to move the icon without resorting to this method.
#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>