Facebook Button for Bootstrap using Sass and Font Awesome

Learn how-to create a Facebook button for the Bootstrap front-end framework using Sass and Font Awesome.

You must have Bootstrap and Font Awesome already added to your website.

HTML

Add the following where you wish the LinkedIn button to appear.

<a href="#" title="Facebook" class="btn btn-facebook btn-lg"><i class="fa fa-facebook fa-fw"></i> Facebook</a>

Sass

.btn-facebook {
   background: #3B5998;
   border-radius: 0;
   color: #fff;
   border-width: 1px;
   border-style: solid;
   border-color: #263961; 
 }
 .btn-facebook:link, .btn-facebook:visited {
   color: #fff;
 }
 .btn-facebook:active, .btn-facebook:hover {
   background: #263961;
   color: #fff;
 }

CSS

.btn-facebook {
  background: #3B5998;
  border-radius: 0;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #263961;
}

.btn-facebook:link, .btn-facebook:visited {
  color: #fff;
}

.btn-facebook:active, .btn-facebook:hover {
  background: #263961;
  color: #fff;
}