Link messing up icon formatting-CodePudding

This

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 ></i> 
                  <p class = "facebook">Facebook</p>
                 </a>
                <i ></i> 
                <p class = "menu">Menu</p>
            </div>
        </div>
    </body>

CodePudding user response：

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  id="menuBar">
    <div >
      <a href="https://www.facebook.com/benniecharmthai" >
        <i ></i>
        <p >Facebook</p>
      </a>
      <div>
        <i ></i>
        <p >Menu</p>
      </div>
    </div>
  </div>
</body>

If you don't prefer using flexbox for the fix, you can consider to use span (display: inline;) instead of p (display: inline-block;)

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  id="menuBar">
    <div >
      <a href="https://www.facebook.com/benniecharmthai" >
        <i ></i>
        <span >Facebook</span>
      </a>
      <i ></i>
      <span >Menu</span>
    </div>
  </div>
</body>

CodePudding user response：

use span instead of p like below code:

....
<span >Facebook</span>
....

because span has inline display style

CodePudding user response：

The thing which makes formatting different is both i tag and p tag are block-level elements.Which means it takes whole line to the each elemnt.And after an element it takes into a new line.

So in order to solve this you have to use a In-line element.An inline element does not start on a new line.

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 ></i> 
                  <span class = "facebook">Facebook</span>
                 </a>
                <i ></i> 
                <p class = "menu">Menu</p>
            </div>
        </div>
    </body>