Used HTML :
<ul class='sc-ul'>
<li><a id='fbt1' title='My Facebook' href='http://facebook.com/facebookid' target='blank'><img class='fbimg sc-image' src='http://cdn5.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_facebook_box_blue.png'/></a></li>
<li><a id='tw1' title='My Twitter' href='http://twitter.com/mytwitterid' target='blank'><img class='twtimg sc-image' src='http://cdn5.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_twitter_box_blue.png'/></a></li>
<li><a id='gg1' title='My Google+' href='http://plus.google.com/myprofile' target='blank'><img class='gimg sc-image' src='http://cdn5.iconfinder.com/data/icons/GooglePlus_IconSet/128x128/2.png'/></a></li>
</ul>
Putting it in list item makes it easy to bring it inline.
Used CSS :
.sc-ul li
{
display:inline-block;
list-style-type:none;
}
.sc-ul li img
{
width:100px;
height:100px;
}
First is to define that the items should be inline, it's done with the inline-block value on display porperty.
So the output is great, just remember to change the values in HTML so that it's linked to your Social media profiles.
