Link messing up icon formatting

April 25, 2022

This website that I’ve been working on is giving me a problem. Whenever I give it a <a href> tag, it repositions it and changed how the text is formatted. I’ve excluded a lot of code from the main of the website and just added the menu bar, so it should be easier to read.

Wihtout the link:

With the link:

Here’s the code:

body{
    margin: 0;
    font-family: HebrewRegular;
    background-color: white;
}

.menuBar {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: rgb(168, 123, 81);
  }

  .fa-brands, .fab{
      font-size: 30px;
      margin: 10px;
  }

  .fa-solid, .fas{
      font-size: 30px;
      margin: 10px;
      margin-left: 10px;
  }

  .menuIcons{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: center;
    align-items: center;

  }

  .facebook{
    font-size: 25px;
  }

  .menu{
    font-size: 25px;
  }

  a.fbLink{
    text-decoration:none;
    color:inherit
  }

   
           <script src="https://kit.fontawesome.com/a590c06ed2.js" crossorigin="anonymous"></script>
   <body>
        <div class = "menuBar" id = "menuBar"> 
            <div class = "menuIcons">
                <a href = "https://www.facebook.com/benniecharmthai" class = "fbLink">
                  <i class="fa-brands fa-facebook"></i> 
                  <p class = "facebook">Facebook</p>
                 </a>
                <i class="fa-solid fa-bowl-food"></i> 
                <p class = "menu">Menu</p>
            </div>
        </div>
    </body>

>Solution :

p elements go to the new lines (display: inline-block; by default), and you added flexbox for menuIcons to align them. The main problem is you wrap Facebook’s child elements into a which makes your flexbox not work for them.

For the fix, you should add flexbox for .menuIcons > a too.

One side note, to make all containers consistent (not required), I added div to wrap Menu’s elements as well

body{
    margin: 0;
    font-family: HebrewRegular;
    background-color: white;
}

.menuBar {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: rgb(168, 123, 81);
  }

  .fa-brands, .fab{
      font-size: 30px;
      margin: 10px;
  }

  .fa-solid, .fas{
      font-size: 30px;
      margin: 10px;
      margin-left: 10px;
  }

  .menuIcons{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: center;
    align-items: center;

  }

  .facebook{
    font-size: 25px;
  }

  .menu{
    font-size: 25px;
  }

  a.fbLink{
    text-decoration:none;
    color:inherit
  }
  
  /* The fix is here */
  .menuIcons > a, .menuIcons > div {
    display: flex;
    align-items: center;
  }

<script src="https://kit.fontawesome.com/a590c06ed2.js" crossorigin="anonymous"></script>

<body>
  <div class="menuBar" id="menuBar">
    <div class="menuIcons">
      <a href="https://www.facebook.com/benniecharmthai" class="fbLink">
        <i class="fa-brands fa-facebook"></i>
        <p class="facebook">Facebook</p>
      </a>
      <div>
        <i class="fa-solid fa-bowl-food"></i>
        <p class="menu">Menu</p>
      </div>
    </div>
  </div>
</body>