Amazing social media icons with Font Awesome and CSS3

How to create and style social media icons (Facebook, Twitter, Google Plus, etc.) easily for your site using Font Awesome font icons.

Font Awesome provides an iconset as a TrueType font, meaning that you can render and manipulate icons as you would manipulate text with CSS. Each letter corresponds one icon – think Microsoft Windows Wingdings fonts. Icon set is large and the theme is webby, so you’ll find an icon for all your website needs.

Font Awesome goes down well with popular Twitter Bootstrap CSS & JS library as it has  compatible HTML5 markup and icon naming conventions, though it can be used separately too.

How to use

Include Bootstrap and Font AwesomeIf you haven’t done that already, include the latest Bootstrap and Font Awesome in your project.
Include the CSS or LESSYou have two options for enabling the social buttons in your project: vanilla CSS or source LESS. For vanilla CSS, just include the bootstrap-social.css file into your project.For LESS, copy the bootstrap-social.less into your existing Bootstrap directory and import it into bootstrap.less via @import "bootstrap-social.less";. Recompile when ready.
Add some buttons!Start using the buttons as you’ve normally do with the Bootstrap buttons that have an icon by adding the relevant class.
For Example:

[html]
<a class=”btn btn-block btn-social btn-twitter”>
<i class=”fa fa-twitter”></i> Sign in with Twitter</a>
</pre>
[/html]

See live demo:examples.codingplayers.com/socialmedia/