I used a responsive sprite generator to create a sprite.png and its CSS. I added the sprite.png to my images folder and included that url path in the following css that was given to me:
/*sprite*/
..spriteblogger-32, ..spritefacebook-32, ..spritepinterest-32, ..spritetwitter-32
{display:inline-block; overflow:hidden; background-repeat: no-repeat;
background-image:url(../images/catalogue/sprite.png);}
..spriteblogger-32 {width:32px; height:32px; background-position:0.892857% 0.892857%; background-size:800.000%; }
..spritefacebook-32 {width:32px; height:32px; background-position:16.0714% 0.892857%; background-size:800.000%; }
..spritepinterest-32 {width:32px; height:32px; background-position:31.2500% 0.892857%; background-size:800.000%; }
..spritetwitter-32 {width:32px; height:32px; background-position:46.4286% 0.892857%; background-size:800.000%; }
I added the following code to a dwt file where I want the four icons to appear:
<p class="center"><a href="https://custom-embroidered-shirts-hats.blogspot.com/" title="Custom Embroidered Shirts, Hats & Apparel!"><img alt="Blogger" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Blogger"></a>
<a href="https://www.facebook.com/Sun-Embroidery-Screen-Printing-931769516867027/" title="Facebook"><img alt="Facebook" src="http://www.v7n.com/forums/images/catalogue/sprite.png"></a>
<a href="https://twitter.com/sunembroidery" title="Sun Embroidery Screen Printing Tweets"><img alt="Twitter" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Twitter"></a>
<a href="https://www.pinterest.com/sunembroideryscreenprinting/logo-design/"><img alt="Pinterest" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Pinterest"></a>
</p>
Instead of seeing the four images I see linked titles: Blogger Facebook Twitter Pinterest. What am I doing wrong? Thanks for your help!
