html code
You can’t do that with this code, how come?
You can usually do that with all images, how come not these?
What’s the reason?
css code
.container {
width: 233px;
height: 50px;
}
.facebook,
.twitter,
.instagram,
.pinterest {
width: 50px;
height: 50px;
float: left;
cursor: pointer;
}
.facebook {
background: url("https://i.imgur.com/Cp7WRET.png") no-repeat;
}
.twitter {
margin: 0 11px;
background: url("https://i.imgur.com/MchCG7F.png") no-repeat;
}
.instagram {
background: url("https://i.imgur.com/3FPoPUy.png") no-repeat;
}
.pinterest {
margin-left: 11px;
background: url("https://i.imgur.com/IuKZk48.png") no-repeat;
}
<div class="container">
<a class="facebook" href="foo.html" target="_blank"></a>
<a class="twitter" href="foo.html" target="_blank"></a>
<a class="instagram" href="foo.html" target="_blank"></a>
<a class="pinterest" href="foo.html" target="_blank"></a>
</div>