LinkedIn Button for Bootstrap using Sass and Font Awesome

Learn how-to create a LinkedIn social sharing 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="LinkedIn" class="btn btn-linkedin btn-lg"><i class="fa fa-linkedin fa-fw"></i> LinkedIn</a>

Sass

.btn-linkedin {
   background: #0E76A8;
   border-radius: 0;
   color: #fff;
   border-width: 1px;
   border-style: solid;
   border-color: #084461;
 }
 .btn-linkedin:link, .btn-linkedin:visited {
   color: #fff;
 }
 .btn-linkedin:active, .btn-linkedin:hover {
   background: #084461;
   color: #fff;
 }

CSS

.btn-linkedin {
  background: #0E76A8;
  border-radius: 0;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #084461;
}

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

.btn-linkedin:active, .btn-linkedin:hover {
  background: #084461;
  color: #fff;
}