Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.

Create Social Icons with a CSS Sprite

Mick in Tutorials on Dec 18, 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.

Tagged with: css sprites images script 


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


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

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

That was it - works great now!   :grin:

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



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.


Get 100% complete access to our entire collection and find out why SMF owners prefer our themes





Latest Discussions

Join the conversation