LESS Social Icons using FontAwesome

gistfile1.less

.social-icon {
	font-size:0;
	text-decoration:none;

	&:before {
		font-size:40px;
		font-weight:normal;
		font-style:normal;
		font-family:'FontAwesome';
	}

	&.facebook:before {
		color:#3b5998;
		content:'\f082';
	}

	&.twitter:before {
		color:#00aced;
		content:'\f081';
	}

	&.linkedin:before {
		color:#007bb6;
		content:'\f08c';
	}

	&.youtube:before {
		color:#bb0000;
		content:'\f166';
	}

	&.pinterest:before {
		color:#cb2027;
		content:'\f0d3';
	}

	&.googleplus:before {
		color:#dd4b39;
		content:'\f0d4';
	}

	&.instagram:before {
		color:#517fa4;
		content:'\f16d';
	}
}

/*
HTML Example:
	<a href="https://www.facebook.com" target="_blank" rel="nofollow" class="social-icon facebook">Facebook</a>
	<a href="https://twitter.com" target="_blank" rel="nofollow" class="social-icon twitter">Twitter</a>
	<a href="https://www.linkedin.com" target="_blank" rel="nofollow" class="social-icon linkedin">LinkedIn</a>
*/