我想知道为什么我的图标在网页的底部没有正确显示

Question

图标显示在白框的右边，而文本应该隐藏在里面这是一个更小的视图，我添加了它作为一个列，但白框没有显示正确，以及它是在我的页脚。

我所要做的就是正确地布局图标，使它们包含在白框内。以及调整较小的视图，让我的页脚在底部，而不是被图标覆盖。

这是我的html代码，只是它的一部分。

`

<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>

这是它的css代码。

`

/* 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;
}

这是图标响应的CSS代码…

`

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

如果你能帮我，谢谢你

我试着调整所有的宽度和高度，不知道我搞砸了，但我似乎不能弄清楚。

Answer 1

尝试将i和span添加到div中。你马上就能看出差别。

<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>