Bootstrap Social Share Button

Classes Hover on class to watch result

`f-facebook`	`#3b5998`
`f-twitter`	`#00b6f1`
`f-youtube`	`#ff0000`
`f-intagram-magenta`	`#c32aa3`
`f-instagram-blue`	`#4c5fd7`
`f-instagram-purple`	`#7232bd`
`f-instagram-orange`	`#f46f30`
`f-instagram-yellow`	`#ffdc7d`
`f-pinterest`	`#cb2027`
`f-google-plus`	`#df4a32`
`f-linkedin`	`#007bb6`
`f-vimeo-blue`	`#45bbff`
`f-vimeo-green`	`#aad450`
`f-vimeo-orange`	`#f7b42c`
`f-vimeo-pink`	`#f27490`
`f-tumbler`	`#2c4762`
`f-snapchat`	`#fffc00`
`f-whatsapp-green`	`#25d366`
`f-whatsapp-teal1`	`#075e54`
`f-whatsapp-teal2`	`#128c7e`
`f-four-square-pink`	`#fc4575`
`f-four-square-blue`	`#2d5be3`
`f-skype-blue`	`#00aff0`
`f-skype-green`	`#7fba00`
`f-android`	`#a4c639`
`f-stumble-upon`	`#eb4924`
`f-flickr-pink`	`#f40083`
`f-flickr-blue`	`#006add`
`f-yahoo`	`#430297`
`f-sound-cloud`	`#ff5500`
`f-spotify-green`	`#1ed760`
`f-spotify-dark-green`	`#1db954`
`f-dribbble`	`#ea4c89`
`f-reddit`	`#ff5700`
`f-deviantart`	`#4a5d4e`
`f-pocket`	`#ee4056`
`f-quora`	`#aa2200`
`f-quora-blue`	`#2b6dad`
`f-slide-share-orange`	`#f7941e`
`f-slide-share-blue`	`#1191d0`
`f-500px`	`#0099e5`
`f-vine`	`#00b489`
`f-github`	`#444444`

Buttons

Sizing

With anchor tag

How To Use

Include Bootstrap and Font Awesome

If you haven't done that already, include the latest Bootstrap and Font Awesome in your project.

Include the CSS or SASS

You have two options for enabling the social buttons in your project: vanilla CSS or source Sass. For vanilla CSS, just include the bootstrap-social.css file into your project.
For Sass, copy the bootstrap-social.sass into your existing Bootstrap directory and import it into bootstrap.scss via @import "bootstrap-social.sass";. Recompile when ready.

Add some buttons!

Start using the buttons as you would normally do with the Bootstrap buttons that have an icon by adding the relevant class. For example:

<a class="btn btn-block f-social f-twitter">
    <span class="fab fa-twitter"></span> Sign in with Twitter <span class="fa fa-twitter"></span>    
</a>

<a class="btn btn-block f-social f-twitter">
    <span class="fab fa-twitter"></span> 
    Sign in with Twitter     
</a>

Group Buttons

<div class="btn-group btn-block" role="group">
    <button class="btn f-social f-twitter ">
        <span class="fab fa-twitter"></span> Tweet on twitter <span class="fa fa-share"></span>
    </button>
    <button class="btn f-social f-facebook">
        <span class="fab fa-facebook"></span> Share on Facebook <span class="fa fa-share"></span>
    </button>
    <button class="btn f-social f-whatsapp-green">
        <span class="fab fa-whatsapp"></span> Send on Whatapp <span class="fa fa-share"></span>
    </button>
</div>

Social Media Share Buttons for Bootstrap

Classes Hover on class to watch result

Buttons

Sizing

With anchor tag

Group Buttons

How To Use