Align icon with text in header using CSS

June 4, 2022

Relatively new to all things HTML and CSS and I am trying to figure out why I can get the instagram icon in my header bar to align with the rest of the text. For some reason no matter what I do the icon won’t align with the text.

The icon is using an element while the rest of the text in the header is

Any suggestions would be greatly appreciated.

enter image description here

/**This is formatting for the top tabs**/
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600');

*{
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    
}

body {
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    font-size: 14px;
}

i p {    
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;

}
    
.container {
    width: 80%;
    margin: 0 auto;
}

header {
  background: #000000;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
  text-align: left;
  height: 50px;

}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
  float: left;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 20px;
  padding: 3px;
  color: white;
  position: relative;
}

nav a,i {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover,i:hover {
  color: rgb(249, 225, 8);
}

nav a::before,i::before {
  content: '';
  display: block;
  height: 5px;
  background-color: rgb(249, 225, 8);

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before,i:hover::before {
  width: 100%;
}

<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<head><script src="https://kit.fontawesome.com/7a49dc0093.js" crossorigin="anonymous"></script></head>

<header>
    <div class="container">
      <h1 class="logo"></h1>

      
      <nav>
        <ul>
          <li><i class="fa-brands fa-instagram"><p>testing</p></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Discover</a></li>
        </ul>
      </nav>
    </div>
  </header>

>Solution :

@Zgunn. I’ve attached code below.
I’ve found some problems while checking your code.
It’s due to absolute position of i::before.

don’t put p tag inside i tag.

use CSS class selectors than element selector. (Because we may use different styles of nav, ul, i, a in many parts )

Document

/**This is formatting for the top tabs**/
@import url(‘https://fonts.googleapis.com/css?family=Work+Sans:400,600’);

 * {
     font-family: 'Work Sans', sans-serif;
     font-weight: 800;
     text-transform: uppercase;
     font-size: 14px;

 }

 body {
     margin: 0;
     font-family: 'Work Sans', sans-serif;
     font-weight: 800;
     font-size: 14px;
 }

 .container {
     width: 80%;
     margin: 0 auto;
 }

 .header {
     background: #000000;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1;
     text-align: left;
     height: 50px;

 }

 .header::after {
     content: '';
     display: table;
     clear: both;
 }

 .nav {
     float: left;
 }

 .nav-menu {
     margin: 0;
     padding: 0;
     list-style: none;
 }

 .nav-menu li {
     display: inline-block;
     margin-left: 70px;
     padding-top: 20px;
     padding: 3px;
     color: white;
     position: relative;
 }

 .nav-link {
     color: rgb(255, 255, 255);
     text-decoration: none;
     text-transform: uppercase;
     font-size: 14px;
 }

 .nav-link i {
     margin-right: 5px;
 }

 .nav-link:hover,
 .nav-link:hover i {
     color: rgb(249, 225, 8);
 }

 .nav-link::before {
     content: '';
     display: block;
     height: 5px;
     background-color: rgb(249, 225, 8);

     position: absolute;
     top: 0;
     width: 0%;

     transition: all ease-in-out 250ms;
 }

 .nav-link:hover::before {
     width: 100%;
 }

 <header class="header">
     <div class="container">
         <h1 class="logo"></h1>
         <nav class="nav">
             <ul class="nav-menu">
                 <li><a href="#" class="nav-link"><i class="fa-brands fa-instagram"></i>testing</a></li>
                 <li><a href="#" class="nav-link">Home</a></li>
                 <li><a href="#" class="nav-link">About Me</a></li>
                 <li><a href="#" class="nav-link">Blog</a></li>
                 <li><a href="#" class="nav-link">Discover</a></li>
             </ul>
         </nav>
     </div>
 </header>

Hope this helps. Happy coding~ 🙂