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/