我的img只显示了一半。 CSS问题

Question

我遇到了关于CSS问题的问题。当我尝试添加新图像时，我的图像仅显示一半。

ul.social li{
	display: inline-block;	
}
ul.social li  i{
	background: url(../images/img-sprite.png)no-repeat -4px -36px ;
  width: 48px;
  height: 48px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px 0 0;
}
ul.social li  i.twitter{
	background-position:  -64px -36px;
}
ul.social li i.google{
	background-position: -122px -35px;
}
ul.social li i.ig{
	background-position: -200px -35px;
}
ul.social li  i:hover{
	background-position:  -4px -93px;
}
ul.social li  i.twitter:hover{
	background-position:  -64px -94px;
}
ul.social li i.google:hover{
	background-position: -122px -92px;
}
ul.social li i.ig:hover{
	background-position: -200px -92px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="col-md-4 footer-top">
					<ul class="social">
						<li><a href="#"><i> </i></a></li>						
						<li><a href="#"><i class="twitter"> </i></a></li>
						<li><a href="#"><i class="google"> </i></a></li>
						<li><a href="#"><i class="ig"> </i></a></li>
					</ul>
				</div>

结果如下：

有人可以帮我解决我的问题吗？

Answer 1

这取决于sprite.png的布局方式，但您可能只需要更改：

ul.social li i.ig{
    background-position: -200px -35px;
}

到

ul.social li i.ig{
    background-position: -170px -35px;
}