Bootstrap 3. Add icons and buttons of social networks on site

January 7, 2016 18 egor

Buttons with icons of social networks based on Bootstrap and Font Awesome

Example of buttons

btn-adn 
  1. <a class="btn btn-block btn-social btn-adn">
  2.     <span class="fa fa-adn"></span> Sing in with App.net
  3. </a>
btn-bitbucket 
  1. <a class="btn btn-block btn-social btn-bitbucket">
  2.     <span class="fa fa-bitbucket"></span> ... Bitbucket
  3. </a>
btn-dropbox 
  1. <a class="btn btn-block btn-social btn-dropbox">
  2.     <span class="fa fa-dropbox"></span> ... Dropbox
  3. </a>
btn-facebook 
  1. <a class="btn btn-block btn-social btn-facebook">
  2.     <span class="fa fa-facebook"></span> ... Facebook
  3. </a>
btn-flickr 
  1. <a class="btn btn-block btn-social btn-flickr">
  2.     <span class="fa fa-flickr"></span> ... Flickr
  3. </a>
btn-foursquare 
  1. <a class="btn btn-block btn-social btn-foursquare">
  2.     <span class="fa fa-foursquare"></span> ... Foursquare
  3. </a>
btn-github 
  1. <a class="btn btn-block btn-social btn-github">
  2.     <span class="fa fa-github"></span> ... Github
  3. </a>
btn-google 
  1. <a class="btn btn-block btn-social btn-google">
  2.     <span class="fa fa-google"></span> ... Google
  3. </a>
btn-instagram 
  1. <a class="btn btn-block btn-social btn-instagram">
  2.     <span class="fa fa-instagram"></span> ... Instagram
  3. </a>
btn-linkedin 
  1. <a class="btn btn-block btn-social btn-linkedin">
  2.     <span class="fa fa-linkedin"></span> ... LinkedIn
  3. </a>
btn-microsoft 
  1. <a class="btn btn-block btn-social btn-microsoft">
  2.     <span class="fa fa-microsoft"></span> ... Microsoft
  3. </a>
btn-odnoklassniki 
  1. <a class="btn btn-block btn-social btn-odnoklassniki">
  2.     <span class="fa fa-odnoklassniki"></span> ... Odnoklassniki
  3. </a>
btn-openid 
  1. <a class="btn btn-block btn-social btn-openid">
  2.     <span class="fa fa-openid"></span> ... OpenID
  3. </a>
btn-pinterest 
  1. <a class="btn btn-block btn-social btn-pinterest">
  2.     <span class="fa fa-pinterest"></span> ... Pinterest
  3. </a>
btn-reddit 
  1. <a class="btn btn-block btn-social btn-reddit">
  2.     <span class="fa fa-reddit"></span> ... Reddit
  3. </a>
btn-soundcloud 
  1. <a class="btn btn-block btn-social btn-soundcloud">
  2.     <span class="fa fa-soundcloud"></span> ... Soundcloud
  3. </a>
btn-tumblr 
  1. <a class="btn btn-block btn-social btn-tumblr">
  2.     <span class="fa fa-tumblr"></span> ... Tumblr
  3. </a>
btn-twitter 
  1. <a class="btn btn-block btn-social btn-twitter">
  2.     <span class="fa fa-twitter"></span> ... Twitter
  3. </a>
btn-vimeo 
  1. <a class="btn btn-block btn-social btn-vimeo">
  2.     <span class="fa fa-vimeo"></span> ... Vimeo
  3. </a>
btn-vk 
  1. <a class="btn btn-block btn-social btn-vk">
  2.     <span class="fa fa-vk"></span> ... VK
  3. </a>
btn-yahoo 
  1. <a class="btn btn-block btn-social btn-yahoo">
  2.     <span class="fa fa-yahoo"></span> ... Yahoo!
  3. </a>

Variations of sizes

  1. <a class="btn btn-block btn-social btn-facebook btn-lg">
  2.     <span class="fa fa-facebook"></span> Sing in with Facebook
  3. </a>
 
  1. <a class="btn btn-block btn-social btn-facebook">
  2.     <span class="fa fa-facebook"></span> Sing in with Facebook
  3. </a> 
<a class="btn btn-block btn-social btn-facebook btn-sm">
    <span class="fa fa-facebook"></span> Sing in with Facebook
</a>
 
  1. <a class="btn btn-block btn-social btn-facebook btn-xs">
  2.     <span class="fa fa-facebook"></span> Sing in with Facebook
  3. </a>
 
  1. <a class="btn btn-social-icon btn-lg btn-facebook">
  2.     <span class="fa fa-facebook"></span>
  3. </a>
 
  1. <a class="btn btn-social-icon btn-facebook">
  2.     <span class="fa fa-facebook"></span>
  3. </a>
 
  1. <a class="btn btn-social-icon btn-sm btn-facebook">
  2.     <span class="fa fa-facebook"></span>
  3. </a>
 
  1. <a class="btn btn-social-icon btn-xs btn-facebook">
  2.     <span class="fa fa-facebook"></span>
  3. </a>

How to use

1. Include Bootstrap and Font Awesome to your project 

  1. <link href="/path/to/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="/path/to/css/font-awesome.css" rel="stylesheet">

2. Include the CSS bootstrap-social.css 

  1. <link rel="stylesheet" type="text/css" href="/path/to/css/bootstrap-social.css" />

3. Add buttons: 

  1. <a class="btn btn-block btn-social btn-facebook">
  2.     <span class="fa fa-facebook"></span> Sing in with Facebook
  3. </a>

or icons: 

  1. <a class="btn btn-social-icon btn-facebook">
  2.     <span class="fa fa-facebook"></span>
  3. </a>

Link to site of plugin: http://lipis.github.io/bootstrap-social/

Bootstrap,  HTML,  HTML5,  CSS