I am trying to use social media icons on my page, but for some reason they do not work. I have included a link inside the icons, but nothing happens when I click on them.
What am I doing wrong?
<li><a href="https://500px.com/wandering_viking.html" target="_blank" class="contact-icon">
<i class="fa fa-500px" aria-hidden="true"></i></a>
</li>
</ul>
.social-media-list {
position: relative;
font-size: 2.3rem;
text-align: center;
width: 100%;
}
.social-media-list li a {
color: #fff;
}
.social-media-list li {
position: relative;
top: 0;
left: -20px;
display: inline-block;
height: 70px;
width: 70px;
margin: 10px auto;
line-height: 70px;
border-radius: 50%;
color: #fff;
background-color: rgb(27,27,27);
cursor: pointer;
transition: all .2s ease-in-out;
}
.social-media-list li:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
opacity: 0;
box-shadow: 0 0 0 1px #fff;
transition: all .2s ease-in-out;
}
.social-media-list li:hover {
background-color: #fff;
}
.social-media-list li:hover:after {
opacity: 1;
transform: scale(1.12);
transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
}
.social-media-list li:hover a {
color: #111;
}