Amazingly Simple and Beautiful. Brand spankin' new free SMF themes every month.

Create Social Icons with a CSS Sprite

Mick in Tutorials
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

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.

Website: https://www.idesignsmf.com/

    


5 Comments

Brian Demeter
Mar 12, 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.
1

Mick
Mar 12, 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

Mick
Mar 12, 2013
I told you wrong.  I updated the the html markup code on 1st post.

Demo: below


3

Brian Demeter
Mar 12, 2013
That was it - works great now!   :grin:

Thanks for the quick reply.
4

Mick
Mar 12, 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



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.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up