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