Split image in CSS? - css

Question

I'm trying to edit some CSS (on a tumblr page) and I'm having a problem with an icon. It's the Twitter icon on the far right of this image
Above appears as split in half on the page.
I used the code below for all four of the icons ((just a different url for each image), yet I'm not sure why the Twitter one is split like that.
What could be the reason and how can I fix it?
Code:
#above-nav-links a.twitter:before {
background-image: url(http://imgh.us/twitter_icon_blue.svg);
content: ' ';
display: inline-block;
width: 25px;
height: 25px;
margin-right: 3px;
repeat: no-repeat;
}
If you copy-paste the background-image url, you can see the image I used for the icon (it is not split). The pages I used for the other icons are similar (in terms of spacing, size, etc.).

Answer 1

As I havn't seen your code, you can change your code accordingly
<ul id="#icons">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style type="text/css">
#icons > li
{
display: inline-block;
list-style:none;
float:left;
}
#icons > li > a
{
background-image: url("icons.png");
width: 25px;
display: inline-block;
height: 25px;
repeat: no-repeat;
}
#icons > li:nth-child(1) > a
{
background-position:2px -8px;
}
#icons > li:nth-child(2) > a
{
background-position:-29px -8px;
}
#icons > li:nth-child(3) > a
{
background-position:-61px -8px;
}
#icons > li:nth-child(4) > a
{
background-position:-97px -7px;
}
</style>
Background-positions are set according to my icon image. You may need to udpate as per your image.