I am wondering why my icons at the bottom of the webpage arent properly showing

Question

This is showing the icons to the right of the white box when it should be inside with the text hidden This is showing more of a smaller view where i added it as a column but the white box isnt showing properly as well it is going over my footer.

All i am trying to do is properly layout the icons so they are contained within the white boxes. as well as adjust the smaller view as well so my footer is at the bottom and not being covered by the icons.

This is my html code for it only a portion of it.

`

 <div class="icon-footer">
      <!-- Facebook Icon -->
      <div class="icon fb"></div>
      <i class="fa-brands fa-facebook-f"></i>
      <span>Facebook</span>
      <!-- Twitter Icon -->
      <div class="icon twt"></div>
      <i class="fa-brands fa-twitter"></i>
      <span>Twitter</span>
      <!-- Instagram Icon -->
      <div class="icon ins"></div>
      <i class="fa-brands fa-instagram"></i>
      <span>Instagram</span>
      <!-- Linkedin Icon -->
      <div class="icon lnk"></div>
      <i class="fa-brands fa-linkedin-in"></i>
      <span>Linkedin</span>
      <!-- GitHub Icon -->
      <div class="icon gh"></div>
      <i class="fa-brands fa-github"></i>
      <span>GitHub</span>
      <!-- Discord Icon -->
      <div class="icon disc"></div>
      <i class="fa-brands fa-discord"></i>
      <span>Discord</span>
    </div>
    <footer class="cpr">
      <p class="copyright">© 2022 Gjovani Gorvokaj.</p>
    </footer>
  </body>
</html>

`

This is the css code for it.

`

/* Footer */

.icon-footer {
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 34, 34, 0.9);
}

.icon {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #fff;
  margin: 20px;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  font-family: century;
  overflow: hidden;
  box-shadow: 5px 10px 20px rbga(150, 150, 150, 0.3);
  transition: all 0.3s ease-out;
}

.icon:hover {
  width: 400px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
}

.icon:hover i {
  color: #fff;
}

.icon .fa-facebook-f {
  color: #1a6ed8;
}

.fb:hover {
  background: #1a6ed8;
}

.icon .fa-twitter {
  color: #1da1f2;
}

.twt:hover {
  background: #1da1f2;
}

.icon .fa-instagram {
  background: radial-gradient(
      circle farthest-corner at 35% 90%,
      #fec564,
      transparent 50%
    ),
    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 20% -50%,
      #5258cf,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 60% -20%,
      #893dc2,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
    linear-gradient(
      #6559ca,
      #bc318f 30%,
      #e33f5f 50%,
      #f77638 70%,
      #fec66d 100%
    );
}

.ins:hover {
  background: radial-gradient(
      circle farthest-corner at 35% 90%,
      #fec564,
      transparent 50%
    ),
    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 20% -50%,
      #5258cf,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 60% -20%,
      #893dc2,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
    linear-gradient(
      #6559ca,
      #bc318f 30%,
      #e33f5f 50%,
      #f77638 70%,
      #fec66d 100%
    );
}

.icon .fa-linkedin-in {
  color: #0077b5;
}

.lnk:hover {
  background: #0077b5;
}

.icon .fa-github {
  color: #211f1f;
}

.gh:hover {
  background: #211f1f;
}

.icon .fa-discord {
  color: #5865f2;
}

.disc:hover {
  background: #5865f2;
}

.copyright {
  background-color: rgba(0, 0, 0, 0.9);
  color: #eaf6f6;
  font-size: 0.75rem;
  padding: 20px 0;
  text-align: center;
}

`

this is the icons css code for being responsive...

`

/* Responsive */
    @media only screen and (min-width: 320px) and (max-width: 991px) {
      .icon-footer {
        flex-direction: column;
      }
    }

`

if you could help me out thank you

Ive tried adjusting all of the widths and heights not sure where i messed up but i cant seem to figure it out.

Answer 1

Try adding your i and span inside of your div. You'll immediately see the difference.

<div class="icon-footer">

    <!-- Facebook Icon -->
    <div class="icon fb">
      <i class="fa-brands fa-facebook-f"></i>
      <span>Facebook</span>
    </div>
    
    <!-- Twitter Icon -->
    <div class="icon twt">
      <i class="fa-brands fa-twitter"></i>
      <span>Twitter</span>
    </div>
    
    <!-- Instagram Icon -->
    <div class="icon ins">
      <i class="fa-brands fa-instagram"></i>
      <span>Instagram</span>
    </div>
    
    <!-- Linkedin Icon -->
    <div class="icon lnk">
      <i class="fa-brands fa-linkedin-in"></i>
      <span>Linkedin</span>
    </div>
    
    <!-- GitHub Icon -->
    <div class="icon gh">
      <i class="fa-brands fa-github"></i>
      <span>GitHub</span>
    </div>
    
    <!-- Discord Icon -->
    <div class="icon disc">
      <i class="fa-brands fa-discord"></i>
      <span>Discord</span>
    </div>
    
  </div>
  
  <footer class="cpr">
    <p class="copyright">© 2022 Gjovani Gorvokaj.</p>
  </footer>