css - linked and :visited with css class causing background image not to appear

I have class .facebook which I am trying to achieve 3 stages :linked, :visited and :hover. image is attached with .facebook class. the :hover works fine but if use :linked, :visited with class .facebook, image doesn't appears unless i use without .facebook class without :linked, :visited.

<ul class="social_networks">
     <li>
        <a target="_blank" href="www.facebook.com"><i class="facebook mediaIconContainer_01 fa fa-lg"></i></a>
      </li>
</ul>

css

.social_networks li a{
display:block;
/*width: 44px;*/
 width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
outline: none;
margin: 0px auto;
padding: 0;
border-left: 1px solid #343a3b;
-webkit-transition: 0.3s;
transition: 0.3s;
/*background-color:green;*/
}

.mediaIconContainer_01{
  width:32px;
  height:32px;
}

 /*facebook*/
.facebook:link,
.facebook:visited
 {
   background:url(/ImagesAndIcons/MediaIcons/facebook_03_32.png) no-repeat;
 }


.facebook:hover{
  background:url(/ImagesAndIcons/MediaIcons/facebook_02_32.png) no-repeat;
}