I’ve done a new css sprite but it shows 2 duplicate icons where 3 of them are good but 2 of them are repeated. Now I tried many times to got solution of this problem but can’t do it.
Please help me to fix this issue and also tell me why jsfiddle and jsbin shows different output sprite because the data is same. 
Try
ul.nav-social li a.fbx{background-position:-34px 0}
Hi, rombeet.
A sprite is an image (usually) with icons on it. Your sprite image looks good.
The thing that you are referring to as a sprite is the way your code is rendering the images on the sprite. That is a little misleading because it sounds like you are asking about the sprite image itself. .
It looks like some of the code was changed when you put it on the page.
Give these changes a try and see if they help:
line 397
ul.nav-social li a {
/* padding: 0 8px; /* DELETE Me */
}
line 416 and others
ul.nav-social li a.twix {
background-position: -35px center; /* ADD the value "center" to all 5 anchors */
}
ul.nav-social li a.goex {
background-position: -70px center; /* CHANGED from -60px to -70px */
}
The horizontal values should be in increments of -35px beginning with zero.
Hopefully, this will get you within the ballpark.
Done but still same error 
Please use jsfiddle or jsbin link to check if working or not. Thanks 
In your fiddle you have this for facebook:
ul.nav-social li a.fbx{background-position:-65 0}
The 65 is missing the unit (px) and will therefore be treated as zero.
It should be 34px anyway as mention by Mittineague above:
ul.nav-social li a.fbx{background-position:-34px 0}
Both Mittineague and I posted suggestions. Which person’s suggestion did you use? Which was “done”?
Hmmm. I was using the code on rombeet’s home page, which is still not quite right, instead of the JS sites.
http://www.filerabit.com/
Well, if it’s different or changing depending on where and when it’s being looked at, that sure complicates things
The OP’s home page shows:
ul.nav-social li a.twix{background-position:-0 0}
ul.nav-social li a.fbx{background-position:-34px 0}
ul.nav-social li a.goex{background-position:-68px 0}
ul.nav-social li a.rssx{background-position:-105px}
ul.nav-social li a.pinx{background-position:-140px}
My recommendation was:
ul.nav-social li a.fbx{background-position:0 center}
ul.nav-social li a.twix{background-position:-35px center}
ul.nav-social li a.goex{background-position:-70px center}
ul.nav-social li a.rssx{background-position:-105px center}
ul.nav-social li a.pinx{background-position:-140px center}
The difference between the offsets should be 35px no matter where one starts.
If he wants to add space between the icons on the page, then he needs to add horizontal margins to the list items, not add padding to the anchors. And because these are background images then “center” or “50%” is needed for the vertical value.
Hey guys, don’t fight problem solved !!!
Mittineague
ronpat
PaulOBYes, 34px looked good to me, but my eyes aren’t so good at seeing 1px differences.
Neither are mine, so I dropped the sprite into GIMP and magnified it 8X. The pixels were clear then.
Tell us when we can look
It’s ready, you can see it but don’t be angry 
We weren’t angry. We hone our skills by bouncing ideas and observations off each other.
The buttons are still a pixel out of alignement on the home page but that’s your choice, so I’m happy.
I haven’t figured out how I swapped the position of the twitter and facebook icons in my recommendation. A goofy moment, I suppose.
Cheers, rombeet.