Social network buttons for Bootstrap 4 using Fontawesone icons
bootstrap-social is a add-on to Bootstrap to add utility to its button system to integrate painlessly social networks.
<link href="bootstrap-social.css" rel="stylesheet" />Include the bootstrap-social stylesheet in the head. it requires the original Bootstrap stylesheet to work
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />bootstrap-social works with the Bootstrap button system : class="btn". bootstrap-social uses the right color of the social network. You can use FontAwesome tags to add the image to your button.
Add btn-social to have a classic button with text + btn-<your network name>
For Facebook
<a class="btn btn-social btn-facebook">
<i class="fab fa-facebook-f"></i>
Login via Facebook
</a>It works with any image or tag :
<a class="btn btn-social btn-google">
<img src="img/btn_google.svg">
Login via Google
</a>Should you need only a square button dispalying the icon of you favorite network, use btn-social-icon :
<a class="btn btn-social-icon btn-linkedin">
<i class="fab fa-linkedin-in"></i>
</a> <a class="btn btn-social-icon btn-linkedin">
<i class="fab fa-linkedin-in"></i>
</a>Bootstap propose the option the group buttons. In that case, no need to use btn-social or btn-social-icon, just put btn-<your network name> in a div with btn-group (as explained in the Bootstrap documentation)
<div class="btn-group">
<button type="button" class="btn btn-linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button type="button" class="btn btn-viadeo">
<i class="fab fa-viadeo"></i>
</button>
<button type="button" class="btn btn-github">
<i class="fab fa-github"></i>
</button>
</div>As explained in the Bootstrap documentation, a vertical variation exists for button group and it works just the same.
<div class="btn-group-vertical">
<button type="button" class="btn btn-linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button type="button" class="btn btn-viadeo">
<i class="fab fa-viadeo"></i>
</button>
<button type="button" class="btn btn-github">
<i class="fab fa-github"></i>
</button>
</div>- Adn
- Bitbucket
- Discord
- Dropbox
- Flickr
- Foursquar
- Github
- Microsoft
- Odnoklassniki
- Openid
- Soundcloud
- Tumblr
- Viadeo
- Vimeo
- Vk
- Yahoo