HTML href links not working

Question

The links that I have assigned to each li does not seem to be even recognized as a link. The cursor does not even change to a hand unless I manually put the code in which is odd. The links are all background images so I can't figure out what the problem is. Please help.

The HTML
<div class="social_container">
<ul>

<li class="fb"><a href="https://www.facebook.com/" target="_blank"></a></li>
<li class="twitter"><a href="#3"></a></li>
<li class="insta"><a href="#4"></a></li>
<li class="yt"><a href="#5"></a></li>
<li class="google"><a href="#6"></a></li>

</ul>

</div>


The CSS

.social_container ul {
      position: relative;
      top: 10%;
      width: 100%;
          padding: 0;
      text-align: center;
      }

.social_container li {
      list-style: none;
      display: inline-block;
       margin: 0 30px 30px 0; 
       cursor: pointer; cursor: hand;
       text-align: center;

 }

.social_container li a {
          display: inline-block;
                               }


.social_container .fb {
            background: url("New Assets/FB.png") no-repeat;
            padding: 25px;
            background-size: contain;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .fb:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}



.social_container .twitter {
            background: url("New Assets/TWITTER.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .twitter:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}


.social_container .insta {
            background: url("New Assets/INSTA.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .insta:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}


.social_container .yt {
            background: url("New Assets/YT.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .yt:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}


.social_container .google{
            background: url("New Assets/GOOGLE.png") no-repeat;
             background-size: contain;
              padding: 25px;
              -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease;

             }

.social_container .google:hover {

  -webkit-transform:scale(1.2); 
    -moz-transform:scale(1.2); 
    -ms-transform:scale(1.2); 
    -o-transform:scale(1.2); 
     transform:scale(1.2);
}

Answer 1

<div class="social_container">
<ul>

<a href="https://www.facebook.com/" target="_blank"><li class="fb"> Face Book </li></a>
<a href="#3"><li class="twitter"> 3 </li></a>
<a href="#4"><li class="insta"> 4 </li></a>
<a href="#5"><li class="yt"> 5 </li></a>
<a href="#6"><li class="google"> Google </li></a>

</ul>

</div>

its better to link your <li>

example: https://jsfiddle.net/TiG3R/u4w2v9q5/