Bootstrap 3 - Social Icons

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-bitbucket"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-youtube"></i>














<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24632076/1366033'>Social Icons</a><br/>
    Font Awesome: <a href='https://fontawesome.com/v4.7.0/icons/#brand'>Brands</a><br/>
<div>

CSS

.fa {
  padding: 4px;
  width: 200px;
}

.fa::before {
  display: inline-block;
  /* .fa-fw */
  width: 1.28571429em;
  text-align: center;
}

.fa::after {
  content: attr(class);
  font-family: consolas, monospace;
  font-size: 15px;
  /* BS - code */
  padding: 2px 4px;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
  margin-left: 5px;
}