Cacher is the code snippet organizer for pro developers

// SOCIAL BUTTONS
.social-buttons {
    a {
        .transition-all;
        color: @dark-gray;
        font-size: 25px;
        
        .fa-stack-1x {
            font-size: 20px;
        }
        
        
        &:hover,
        &:focus,
        &:active {
            color: @brand-gold;
        }
    }
}

<div class="col-sm-6 col-md-4">
  <ul class="list-inline text-center social-buttons">
      <li>
          <a href="#">
              <span class="fa-stack">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
              </span>
          </a>
      </li>
      <li>
          <a href="#">
              <span class="fa-stack">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
              </span>
          </a>
      </li>
      <li>
          <a href="#">
              <span class="fa-stack">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-pinterest-p fa-stack-1x fa-inverse"></i>
              </span>
          </a>
      </li>
      <li>
          <a href="#">
              <span class="fa-stack">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
              </span>
          </a>
      </li>
  </ul>
</div>
<!-- /.col-sm-6 col-md-4 -->