[Solved] How To Add Different Images In Li


Remove float:left from li tag and set same height for img tag and add some margin to right side.

body{background:green}
.social-sites{
    margin-left: 50px;
    margin-top: 20px;
    position: relative;
}

.social-sites ul{
    list-style-type: none;
}

.social-sites ul li{
    display: inline-block;
    text-align: center;
    vertical-align:middle 
}

.social-sites ul li a{
    text-decoration: none;
    padding: 12px;
    margin: 8px;
    font-size: 20px;
    color: #fff;
    vertical-align:middle;
   display: inline-block;
} 
.social-sites ul li a img{
  width:40px;
  margin-right:5px;
}
<div class="social-sites">
  <ul>
    <li class="fb">
      <a href="https://stackoverflow.com/questions/40085413/facebook.com" target="_blank">
        <img src ="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png"/>Facebook</a>
    </li>
    <li class="twit">
      <a href="twitter.com" target="_blank">
        <img src ="http://i.imgur.com/9Z46uKc.png"/>Twitter</a>
    </li>
    <li class="ld">
      <a href="linkedin.com" target="_blank">
        <img src ="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png"/>LinkedIn</a></li>
  </ul>
</div>



solved How To Add Different Images In Li