My latest school project involves creating a contact page for my website, and I want to add social media icons inside circular containers. Below is the CSS code snippet I have used:
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
...
... (CSS code continues)
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
... (social media icon classes continue)
</ul>
</body>
</html>As you can see in this image link, the icons are displayed within the circles with some hover effects applied.
To improve the design further, I introduced a new ul class but need guidance on centering the logos accurately.