I have some social media links on my website with an icon inside the anchor tags. While hovering over the links produces the hand pointer, the links themselves seem unclickable. The only way to open them is to select open in a new tab, which isn't what I want.
I've included the basic JS fiddle below so you can get a better idea of what I'm trying to do.
I haven't included the font for the icons themselves in the js fiddle but it shouldn't be required to get the gist of what's going on.
https://jsfiddle.net/bxantc4j/
<div id="searchandsocial">
<ul class="social-network social-circle">
<li><a href="https://www.facebook.com/Money-Saving-Answers-488686301254180/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/moneysavingqa" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
CSS
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 34px;
height: 34px;
font-size:16px;
vertical-align: middle;
}
.social-circle li i {
margin:0;
line-height:34px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-circle a {
background-color: #717171;
}
