Tutorials Themes Mods Inspiration Collections Theme Store Mod Store SMF HTML CSS geek Dani UX jane Lifestyle LimeStone

Create Social Icons with a CSS Sprite

Written by Mick in Tutorials on 18 Dec 2012


Below, you will find the code that will put together an attractive looking Social Icon CSS Sprite for your SMF forum. This CSS Sprite will make it easy for you to add social icons as well as keeping your website quick by not making a dozen calls for images.


The CSS:
ul.socialicons {
list-style: none;
overflow: auto;
}
ul.socialicons li {
width: 32px;
height: 33px;
padding: 0 5px 0 0;
float: left;
}
ul.socialicons li a {
width: 32px;
height: 33px;
display: block;
background: url(socialSprite.png) no-repeat;
}
ul.socialicons li a.stumbleupon { background-position: 0 0; }
ul.socialicons li a.stumbleupon:hover { background-position: -38px 0; }
ul.socialicons li a.digg { background-position: 0 -36px; }
ul.socialicons li a.digg:hover { background-position: -38px -36px; }
ul.socialicons li a.facebook { background-position: 0 -73px; }
ul.socialicons li a.facebook:hover { background-position: -38px -73px; }
ul.socialicons li a.twitter { background-position: 0 -109px; }
ul.socialicons li a.twitter:hover { background-position: -38px -109px; }
ul.socialicons li a.delicious { background-position: 0 -146px; }
ul.socialicons li a.delicious:hover { background-position: -38px -146px; }
ul.socialicons li a.flickr { background-position: 0 -183px; }
ul.socialicons li a.flickr:hover { background-position: -38px -183px; }
ul.socialicons li a.youtube { background-position: 0 -219px; }
ul.socialicons li a.youtube:hover { background-position: -38px -219px; }
ul.socialicons li a.skype { background-position: 0 -256px; }
ul.socialicons li a.skype:hover { background-position: -38px -256px; }
ul.socialicons li a.linkedin { background-position: 0 -292px; }
ul.socialicons li a.linkedin:hover { background-position: -38px -292px; }
ul.socialicons li a.vimeo { background-position: 0 -329px; }
ul.socialicons li a.vimeo:hover { background-position: -38px -329px; }
ul.socialicons li a.blogger { background-position: 0 -365px; }
ul.socialicons li a.blogger:hover { background-position: -38px -365px; }
ul.socialicons li a.tumblr { background-position: 0 -402px; }
ul.socialicons li a.tumblr:hover { background-position: -38px -402px; }
ul.socialicons li a.picasa { background-position: 0 -438px; }
ul.socialicons li a.picasa:hover { background-position: -38px -438px; }
ul.socialicons li a.wordpress { background-position: 0 -475px; }
ul.socialicons li a.wordpress:hover { background-position: -38px -475px; }
ul.socialicons li a.rss { background-position: 0 -511px; }
ul.socialicons li a.rss:hover { background-position: -38px -511px; }
ul.socialicons li a.mobileme { background-position: 0 -548px; }
ul.socialicons li mobileme:hover { background-position: -38px -548px; }
ul.socialicons li a.apple { background-position: 0 -585px; }
ul.socialicons li a.apple:hover { background-position: -38px -585px; }
ul.socialicons li a.gpluslight { background-position: 0 -621px; }
ul.socialicons li a.gpluslight:hover { background-position: -38px -621px; }
ul.socialicons li a.gplusdark { background-position: 0 -694px; }
ul.socialicons li a.gplusdark:hover { background-position: -38px -694px; }
ul.socialicons li a.twitterb { background-position: 0 -658px; }
ul.socialicons li a.twitterb:hover { background-position: -38px -658px; }
ul.socialicons li a.instagram { background-position: 0 -731px; }
ul.socialicons li a.instagram:hover { background-position: -38px -731px; }
ul.socialicons li a.myspace { background-position: 0 -767px; }
ul.socialicons li a.myspace:hover { background-position: -38px -767px; }
ul.socialicons li a.dribble { background-position: 0 -803px; }
ul.socialicons li a.dribble:hover { background-position: -38px -803px; }
ul.socialicons li a.blip { background-position: 0 -838px; }
ul.socialicons li a.blip:hover { background-position: -38px -838px; }
ul.socialicons li a.spotify { background-position: 0 -874px; }
ul.socialicons li a.spotify:hover { background-position: -38px -874px; }
ul.socialicons li a.grooveshark { background-position: 0 -910px; }
ul.socialicons li a.grooveshark:hover { background-position: -38px -910px; }
ul.socialicons li a.ichat { background-position: 0 -946px; }
ul.socialicons li a.ichat:hover { background-position: -38px -946px; }
ul.socialicons li a.github { background-position: 0 -981px; }
ul.socialicons li a.github:hover { background-position: -38px -981px; }
ul.socialicons li a.soundcloud { background-position: 0 -1017px; }
ul.socialicons li a.soundcloud:hover { background-position: -38px -1017px; }
ul.socialicons li a.pinterest { background-position: 0 -1053px; }
ul.socialicons li a.pinterest:hover { background-position: -38px -1053px; }
ul.socialicons li a.smugmug { background-position: 0 -1088px; }
ul.socialicons li a.smugmug:hover { background-position: -38px -1088px; }
ul.socialicons li a.virb { background-position: 0 -1124px; }
ul.socialicons li a.virb:hover { background-position: -38px -1124px; }
ul.socialicons li a.technorait { background-position: 0 -1160px; }
ul.socialicons li a.technorait:hover { background-position: -38px -1160px; }
ul.socialicons li a.slashdot { background-position: 0 -1195px; }
ul.socialicons li a.slashdot:hover { background-position: -38px -1195px; }
ul.socialicons li a.sharethis { background-position: 0 -1231px; }
ul.socialicons li a.sharethis:hover { background-position: -38px -1231px; }
ul.socialicons li a.posterous { background-position: 0 -1267px; }
ul.socialicons li a.posterous:hover { background-position: -38px -1267px; }
ul.socialicons li a.googleb { background-position: 0 -1302px; }
ul.socialicons li a.googleb:hover { background-position: -38px -1302px; }
ul.socialicons li a.reddit { background-position: 0 -1338px; }
ul.socialicons li a.reddit:hover { background-position: -38px -1338px; }
ul.socialicons li a.friendfollow { background-position: 0 -1374px; }
ul.socialicons li a.friendfollow:hover { background-position: -38px -1374px; }
ul.socialicons li a.designfloat { background-position: 0 -1409px; }
ul.socialicons li a.designfloat:hover { background-position: -38px -1409px; }
ul.socialicons li a.amazon { background-position: 0 -1445px; }
ul.socialicons li a.amazon:hover { background-position: -38px -1445px; }
ul.socialicons li a.netvibes { background-position: 0 -1481px; }
ul.socialicons li a.netvibes:hover { background-position: -38px -1481px; }
ul.socialicons li a.bing { background-position: 0 -1516px; }
ul.socialicons li a.bing:hover { background-position: -38px -1516px; }
ul.socialicons li a.yahoo { background-position: 0 -1552px; }
ul.socialicons li a.yahoo:hover { background-position: -38px -1552px; }
ul.socialicons li a.aim { background-position: 0 -1588px; }
ul.socialicons li a.aim:hover { background-position: -38px -1588px; }
ul.socialicons li a.email { background-position: 0 -1623px; }
ul.socialicons li a.email:hover { background-position: -38px -1623px; }
ul.socialicons li a.ebay { background-position: 0 -1659px; }
ul.socialicons li a.ebay:hover { background-position: -38px -1659px; }
ul.socialicons li a.paypal { background-position: 0 -1695px; }
ul.socialicons li a.paypal:hover { background-position: -38px -1695px; }
ul.socialicons li a.feedburner { background-position: 0 -1730px; }
ul.socialicons li a.feedburner:hover { background-position: -38px -1730px; }
ul.socialicons li a.podcast { background-position: 0 -1766px; }
ul.socialicons li a.podcast:hover { background-position: -38px -1766px; }
ul.socialicons li a.appstoreios { background-position: 0 -1802px; }
ul.socialicons li a.appstoreios:hover { background-position: -38px -1802px; }
ul.socialicons li a.itunes { background-position: 0 -1837px; }
ul.socialicons li a.itunes:hover { background-position: -38px -1837px; }
ul.socialicons li a.appstoremac { background-position: 0 -1873px; }
ul.socialicons li a.appstoremac:hover { background-position: -38px -1873px; }
ul.socialicons li a.yelp { background-position: 0 -1909px; }
ul.socialicons li a.yelp:hover { background-position: -38px -1909px; }
ul.socialicons li a.wthree { background-position: 0 -1944px; }
ul.socialicons li a.wthree:hover { background-position: -38px -1944px; }
ul.socialicons li a.etsy { background-position: 0 -1980px; }
ul.socialicons li a.etsy:hover { background-position: -38px -1980px; }
ul.socialicons li a.stackoverflow { background-position: 0 -2016px; }
ul.socialicons li a.stackoverflow:hover { background-position: -38px -2016px; }
ul.socialicons li a.foursquare { background-position: 0 -2051px; }
ul.socialicons li a.foursquare:hover { background-position: -38px -2051px; }
ul.socialicons li a.quora { background-position: 0 -2087px; }
ul.socialicons li a.quora:hover { background-position: -38px -2087px; }
ul.socialicons li a.photobucket { background-position: 0 -2123px; }
ul.socialicons li a.photobucket:hover { background-position: -38px -2123px; }


The HTML:
<ul class="socialicons">
     
         <li><a class="apple" href="link to social profile here"></a></li>
         <li><a class="facebook" href="link to social profile here"></a></li>
         <li><a class="tumblr" href="link to social profile here"></a></li>
         <li><a class="twitter" href="link to social profile here"></a></li>
         <li><a class="rss" href="link to social profile here"></a></li>
   
</ul>


Dont forget the image!!!
Take this image and upload it to your website. Then you will get the URL to the image and add it into the CSS file.
Mick

is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.


    

5 Comments

Thanks for an awesome and very useful script!

One problem I'm having is the icons are displayed in a vertical column instead of a left to right ordered row. What would I change to get the icons to display in a row format?

My main goal is to display the icons in a row in the upper right area of the forum, where the site slogan is usually displayed; any help there would be appreciated.
#1
Quote from: Brian Demeter on 12 Mar 2013
Thanks for an awesome and very useful script!

One problem I'm having is the icons are displayed in a vertical column instead of a left to right ordered row. What would I change to get the icons to display in a row format?

My main goal is to display the icons in a row in the upper right area of the forum, where the site slogan is usually displayed; any help there would be appreciated.

Hi Brian and welcome.


Make sure the markup has the proper class.
<ul class="socialicons">
     <li>
          <a class="social network name here" href="link to social profile here"></a>
          <a class="social network name here" href="link to social profile here"></a>
          <a class="social network name here" href="link to social profile here"></a>
          <a class="social network name here" href="link to social profile here"></a>
          <a class="social network name here" href="link to social profile here"></a>
     </li>
</ul>


Like this:
<ul class="socialicons">
     <li>
          <a class="a.stumbleupon" href="link to social profile here"></a>
          <a class="a.facebook" href="link to social profile here"></a>
          <a class="a.twitter" href="link to social profile here"></a>
          <a class="a.delicious" href="link to social profile here"></a>
          <a class="a.tumblr" href="link to social profile here"></a>
     </li>
</ul>
#2
I told you wrong.  I updated the the html markup code on 1st post.

Demo: below



#3
That was it - works great now!   :grin:

Thanks for the quick reply.
#4
Quote from: Brian Demeter on 12 Mar 2013
That was it - works great now!   :grin:

Thanks for the quick reply.
No prob. The opening and closing li's where missing.  :shocked:
#5

Get more stuff like this