Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated!
<div class="social-links">
<ul>
<li class="m-link">
<a href=""><i class="far fa-envelope"></i></a>
</li>
<li class="m-link">
<a href=""><i class="fab fa-linkedin-in"></i></a>
</li>
<li class="m-link">
<a href=""><i class="far fa-address-card"></i></a>
</li>
</ul>
</div>
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
Encountering an issue where hover color does not apply to the icon/link when hovered over. Attempted to add additional hover effect for ".m-link a" but it only works when cursor is on the link, not on the list element itself. As a beginner, seeking guidance from experienced individuals. Thank you in advance!