CODEWITHSUNDEEP
htmlcssfooter
yemy
yemy

Reputation: 848

Icons in footer

I have a footer with four icons and they lie on top of each other. My aim is to arrange the four icons side by side. I tried different things but nothing worked. Either I have the icons all at one point in the middle, the left side at the bottom or vertical in a row. Would ne nice to get some help for that!:)

<style>
    .i{
        margin: 50px;
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        float: left;
    }
</style>
<body>
  <p class="container" div align="center" class = "i">
  <img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
  <p class = "i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>

  <div class = "footer">
      <p><img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord"></p>
      <p><img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord"></p>
      <p><img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail"></p>
      <p><img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads"></p>
  </div>
</body>
</html>

Upvotes: 0

Views: 4030

Answers (4)

BOZ
BOZ

Reputation: 2020

First of all, it doesn't make sense to use this if there will only be an image inside the "p" tag. I removed them.

  • We created a new element named ".footer--icons" in the footer and included all the images.
  • The next is easy, we set the Element to "display:flex" and align it all side by side.

See: excellent article about flex-box

  • Also with "align-items" we have centered them all on the "Y" axis and with "justify-content" we have centered them all on the "X" axis relative to their parent.

.i {
  margin: 50px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
  float: left;
}

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

.footer--icons > img {
  margin: 5px;
}
<p class="container" div align="center" class="i">
  <img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
<p class="i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>

<div class="footer">
  <div class="footer--icons">
    <img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
    <img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
    <img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
    <img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">  
  </div>
</div>

Upvotes: 0

Simon
Simon

Reputation: 133

Remove the paragraph tags:

<div class = "footer">
      <img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
      <img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
      <img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
      <img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">
  </div>

Then amend your .footer class to the following:

   .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        display: flex;
    }

To center the images, add justify-content: center to the footer class. To distribute them evenly, add justify-content: space-between.

For a complete guide to flexbox (display: flex), you can check this article out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

jade
jade

Reputation: 809

Just use CSS flex-blox and .footer as your container.

.footer {
        display: flex;
        justify-content: center/flex-start;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        float: left;
}

With justify-content you can control your flex-items either on center or left side of the parent container which is what you want to happen.

Upvotes: 1

Walter
Walter

Reputation: 128

Add the following to you css footer class:

display:flex;
flex-direction:row;

Upvotes: 0

Related Questions