Markup and LESS styles for social icons with round backgrounds, using Font Awesome plus gradient and shadow variables I've setup and shared in other gists.

social-icons.less

// Social Icons with round backgrounds, using Font Awesome plus gradient and shadow variables I've setup and shared in other gists.

// Works with this markup:
<ul class="social">
  <li><a class="twitter" href="#" title="Twitter Profile"><i class="icon-twitter"></i></a></li>
  <li><a class="facebook" href="#" title="Facebook Page"><i class="icon-facebook"></i></a></li>
  <li><a class="linkedin" href="#" title="LinkedIn Profile"><i class="icon-linkedin"></i></a></li>
  <li><a class="googleplus" href="#" title="Google+ Profile"><i class="icon-google-plus"></i></a></li>
  <li><a class="github" href="#" title="GitHub Profile"><i class="icon-github-alt"></i></a></li>
</ul>

// Applying these styles via LESS
// Note that this also centers the icons within the ul
// I have not used IE 7 hacks for centering here. For IE 7 support see:
// http://alittlecode.com/center-list-items-horizontally-text-align-center-inline-block/

ul.social {
  width: 100%;
	margin-left: 0; // removing standard ol ul margin-left
	text-align: center; // http://stackoverflow.com/a/8641277/1166287 and http://jsfiddle.net/3Ezx2/3/
	> li {
			display: inline-block; // http://stackoverflow.com/a/8641277/1166287 and http://jsfiddle.net/3Ezx2/3/
		> a {
			font-size: 16px;
			line-height: 16px;
			padding: 8px 4px 0;
			display: inline-block;
			width: 24px;
			height: 24px;
			margin: 0 3px 3px 0;
			background-color: @gray;
			background-color: rgba(133,133,133,0.7);
			color: #fff;
			-webkit-border-radius: 24px;
	    -moz-border-radius: 24px;
	    border-radius: 24px;
	    text-shadow: @text-shadow-up-darker;
	    .box-shadow(@box-shadow-inset-down-darker);
	    .gradient-standard();
			&:hover {
				text-decoration: none;
				background-color: @navbar-link-color-hover;
				.box-shadow(@box-shadow-inset-down-darkest);
				text-shadow: @text-shadow-down-darkest;
				// .gradient-inverse();
			}
		}
	}
}