Example of buttons
btn-adn |
<a class="btn btn-block btn-social btn-adn"> <span class="fa fa-adn"></span> Sing in with App.net </a> |
|
btn-bitbucket |
<a class="btn btn-block btn-social btn-bitbucket"> <span class="fa fa-bitbucket"></span> ... Bitbucket </a> |
|
btn-dropbox |
<a class="btn btn-block btn-social btn-dropbox"> <span class="fa fa-dropbox"></span> ... Dropbox </a> |
|
btn-facebook |
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> ... Facebook </a> |
|
btn-flickr |
<a class="btn btn-block btn-social btn-flickr"> <span class="fa fa-flickr"></span> ... Flickr </a> |
|
btn-foursquare |
<a class="btn btn-block btn-social btn-foursquare"> <span class="fa fa-foursquare"></span> ... Foursquare </a> |
|
btn-github |
<a class="btn btn-block btn-social btn-github"> <span class="fa fa-github"></span> ... Github </a> |
|
btn-google |
<a class="btn btn-block btn-social btn-google"> <span class="fa fa-google"></span> ... Google </a> |
|
btn-instagram |
<a class="btn btn-block btn-social btn-instagram"> <span class="fa fa-instagram"></span> ... Instagram </a> |
|
btn-linkedin |
<a class="btn btn-block btn-social btn-linkedin"> <span class="fa fa-linkedin"></span> ... LinkedIn </a> |
|
btn-microsoft |
<a class="btn btn-block btn-social btn-microsoft"> <span class="fa fa-microsoft"></span> ... Microsoft </a> |
|
btn-odnoklassniki |
<a class="btn btn-block btn-social btn-odnoklassniki"> <span class="fa fa-odnoklassniki"></span> ... Odnoklassniki </a> |
|
btn-openid |
<a class="btn btn-block btn-social btn-openid"> <span class="fa fa-openid"></span> ... OpenID </a> |
|
btn-pinterest |
<a class="btn btn-block btn-social btn-pinterest"> <span class="fa fa-pinterest"></span> ... Pinterest </a> |
|
btn-reddit |
<a class="btn btn-block btn-social btn-reddit"> <span class="fa fa-reddit"></span> ... Reddit </a> |
|
btn-soundcloud |
<a class="btn btn-block btn-social btn-soundcloud"> <span class="fa fa-soundcloud"></span> ... Soundcloud </a> |
|
btn-tumblr |
<a class="btn btn-block btn-social btn-tumblr"> <span class="fa fa-tumblr"></span> ... Tumblr </a> |
|
btn-twitter |
<a class="btn btn-block btn-social btn-twitter"> <span class="fa fa-twitter"></span> ... Twitter </a> |
|
btn-vimeo |
<a class="btn btn-block btn-social btn-vimeo"> <span class="fa fa-vimeo"></span> ... Vimeo </a> |
|
btn-vk |
<a class="btn btn-block btn-social btn-vk"> <span class="fa fa-vk"></span> ... VK </a> |
|
btn-yahoo |
<a class="btn btn-block btn-social btn-yahoo"> <span class="fa fa-yahoo"></span> ... Yahoo! </a> |
Variations of sizes
<a class="btn btn-block btn-social btn-facebook btn-lg"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> |
|
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> |
|
<a class="btn btn-block btn-social btn-facebook btn-sm"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> |
|
<a class="btn btn-block btn-social btn-facebook btn-xs"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> |
|
<a class="btn btn-social-icon btn-lg btn-facebook"> <span class="fa fa-facebook"></span> </a> |
|
<a class="btn btn-social-icon btn-facebook"> <span class="fa fa-facebook"></span> </a> |
|
<a class="btn btn-social-icon btn-sm btn-facebook"> <span class="fa fa-facebook"></span> </a> |
|
<a class="btn btn-social-icon btn-xs btn-facebook"> <span class="fa fa-facebook"></span> </a> |
How to use
1. Include Bootstrap and Font Awesome to your project
<link href="/path/to/css/bootstrap.min.css" rel="stylesheet"> <link href="/path/to/css/font-awesome.css" rel="stylesheet">
2. Include the CSS bootstrap-social.css
<link rel="stylesheet" type="text/css" href="/path/to/css/bootstrap-social.css" />
3. Add buttons:
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> Sing in with Facebook </a>
or icons:
<a class="btn btn-social-icon btn-facebook"> <span class="fa fa-facebook"></span> </a>
Link to site of plugin: http://lipis.github.io/bootstrap-social/