Problem with social media logos sizing

[Edrol97]

Hi all, I have this code I have added to my footer. Two social media icons are correct, and one is not. How do I position the Instagram logo correctly?

<link rel="stylesheet" href="style.css">

<a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
<a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
<a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>

.fa {
    padding: 20px;
    font-size: 30px;
    width: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
 
  .fa:hover {
    opacity: 0.7;
  }
 
  .fa-facebook {
    background: #2e73b7;
    color: white;
  }
 
  .fa-twitter {
    background: #429bd6;
    color: white;
  }
  .fa-instagram {
    background: #ffffff;
  }

 

[Johna]

Without any image, I'm not sure what exactly the problem is. Is the sizing the issue or the positioning? The positioning is probably based on the height.
If you want the same size for each icon, set a max-width and max-height.
If you don't want to change the height, but still horizontally align them, then set the parent element to flex and use align-items: center;, assuming they're even contained in a parent element. If not, then do so.

I'm not sure what exactly your problem is, so I can't give a more specific answer.

 

[Edrol97]

Without any image, I'm not sure what exactly the problem is. Is the sizing the issue or the positioning? The positioning is probably based on the height.
If you want the same size for each icon, set a max-width and max-height.
If you don't want to change the height, but still horizontally align them, then set the parent element to flex and use align-items: center;, assuming they're even contained in a parent element. If not, then do so.

I'm not sure what exactly your problem is, so I can't give a more specific answer.

Think I've solved it now

 

[Johna]

Okay... then I'm not sure I understand what the problem was, because the icons still look misaligned and of different sizes to me? 😕

 

[Edrol97]

Okay... then I'm not sure I understand what the problem was, because the icons still look misaligned and of different sizes to me? 😕

The instagram logo was initially in the middle of the page. Ideally I would like each circle the same size but I'm not entirely sure how to do this. In the CSS I've set both height and width to 80px and they're still different sizes. How do I change this?

 

[Johna]

Have you changed the CSS code since your first post? In that CSS, you only set the width and not the height.

This could also be because of the padding. Rather than using padding, set a fixed width and height and use flexbox to centre the icon:

.element {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

[kemiy]

Make sure all your social icons are the same size and aligned. The Instagram logo likely looks off because its image file has different dimensions or spacing. Some people try shortcuts like buy followers Instagram, but in your case, focus on visual consistency instead. Resize the Instagram image to match the others and check that the link uses the same formatting and target attributes as your Facebook and Twitter icons.

 

[tomliv]

It would be easier to control things if the links were in a list:

<ul>
    <li><a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a></li>
    <li><a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a></li>
    <li><a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a></li>
</ul>

Then you can control things with flexbox (or grid, too):

ul{
    display: flex;
    gap: 1rem;
}

ul li{
    width: 25px; /* just so you can see this */
    height: 25px; /* just so you can see this */
    outline: 1px solid grey; /* just so you can see this */
}

ul li::marker{
    font-size: 0;
}

Adjust as needed. (I added the boxes because I didnt have images handy)