Social Media icons - Making it inline.

• 
• 
• 

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.