What is the best way to center these icons vertically in my navigation menu using CSS?

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>

htmlcss

Answer №1

Get rid of all instances of float and update a.level1 to have display: flex;, then utilize align-items: center; for vertical alignment.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Hey there, I've been working on adding a background color change to my navbar when the scrollY exceeds 30px, and it's functioning properly. However, I'm encountering an error in the console which states that the new classList cannot be added ...

cssangularangularjstypescripttypeerror

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

According to the section on icons in the Base CSS page of GitHub's Twitter bootstrap, Glyphicons Halflings were not originally available for free. However, thanks to an agreement between Bootstrap and the creators of Glyphicons, developers can now use ...

javascripthtmltwitter-bootstrapglyphicons

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

cssreactjssassbuild

How can the border of the select element be removed when it is active in select2

After examining the CSS code, I am still unable to locate the specific property that is being applied to the main element. I am currently customizing the select2 library to suit my needs. However, I am stuck in the CSS as I cannot determine which property ...

javascripthtmlcssangularjsangularjs-select2

What are the steps to create a button with similar design using css3?

How can I create a button with the same lower part as shown in this picture? I've already achieved 50% of it with border-radius, but need help expanding the lower part to match. Any suggestions? .list{ height: 280px; width: 220px; position: relativ ...

htmlcssbuttoncss-shapes

The table row disappears but the value persists

I have designed a table where users can perform calculations. However, when a row is deleted, the values from that row appear in the row below it and subsequent rows as well. What I want is for the user to be able to completely remove a row with its values ...

javascripthtmlreactjs

Integration issue: React.js is failing to render within a Django project

I have been working on a project where React is not rendering anything on Django localhost. index.html <!DOCTYPE html> <html lang="en"> <head></head> <body> <div id="App"> <!---all will b ...

javascripthtmldjangoreactjs

Embed an HTML element within a DIV container

How can I add an HTML tag such as <p> to wrap around the text "Search"? <button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> I am looki ...

jqueryhtmlcss

Only IE7 seems to be experiencing a z-index problem with CSS that is not present on any

I’ve encountered a perplexing problem with CSS z-index in IE7 that I just can’t seem to solve. #screen { display: none; background-image: url('/images/bg.png'); background-repeat: repeat; position: fixed; top: 0px; le ...

htmlcssinternet-explorerinternet-explorer-7z-index

Node.js application for changing attributes in an HTML string

Within my node.js backend, there exists an object with a specific property named content, which stores an HTML string. The content within includes an img tag that currently has a src attribute containing a base64 string. I am seeking to modify this src att ...

javascripthtmlnode.js

Display div - conceal div - pause for 15 minutes - continue the cycle

I have a challenging JavaScript task that I've been struggling with for quite some time. The goal is to display a div for 5 seconds, hide it, wait for 15 minutes, then show it again for another 5 seconds, and continue this process in an infinite loop. ...

javascriptjqueryhtmlhideshow

JavaScript code is failing to render data properly within HTML documents

I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...

javascripthtml

Trouble with AngularJS Controller Displaying/Hiding Content as Expected

I'm struggling to make content disappear when a button is clicked and then show a new set of content upon that button click. I can't seem to get it to work as intended. The first section simply does not disappear when the button is clicked. The s ...

javascripthtmlangularjscontroller

The getElementById function can only select one option at a time and cannot select multiple options

I'm having an issue with a JavaScript function that is supposed to allow me to select multiple options, but it's only selecting the first one. Here is the JavaScript code: function index(){ var a="${staffindex}".replace("[",""); ...

javascripthtmlselectgetelementbyid

Design a Unique CSS Shape

Do you have any suggestions on how to create this shape using only CSS, without SVG paths? Thank you in advance! Check out the screenshot here ...

cssshapes

displaying a Google Map within a designated container

I'm currently working on a basic website layout that consists of a full-width banner, a left menu (200px), and right content (600px). I have a simple jQuery script set up to load the content on the right-hand side when any of the five menu items are c ...

javascriptjqueryhtmlcss

Django causing CSS issues following the utilization of an if statement

I have been working on adding a dropdown list to my navbar, which I created using Bootstrap. However, whenever I place the dropdown menu inside an if statement for looping categories into a list, it seems to be breaking the CSS. Check out the navbar witho ...

pythonhtmldjangobootstrap-5

Upon including the enctype attribute as "multipart/form-data" in my form and submitting it, the form redirects to a different page

My website has two main pages: The first page is admin.php <?php session_start(); if (!isset($_GET['page'])){ $_GET['page'] = 'home'; }//end if include_once(dirname(__FILE__)."/function.php"); ?> <?ph ...

phphtmlmysql