I still have the problem with the position of the grey icon which is too close to the previous. I copied the instruction as you write in your article
.gkYouTube {
background: url("FULL URL social_icons.png") no-repeat scroll -115px 0 transparent;
display: block;
float: left;
height: 22px;
line-height: 22px;
padding: 0;
text-indent: -9999px;
transition: background 0.3s cubic-bezier(0.2, 0.7, 0.9, 1) 0s, color 0.2s linear 0s;
width: 28px;
}
.gkYouTube:active,
.gkYouTube:focus,
.gkYouTube:hover {
background: transparent url('FULL URL social_icons.png') no-repeat -110px -22px;
}
but it has that problem of position....
can you please help me?