<div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2 class="faceh2">SOCIAL ICONS WITH NICE EFFECTS and unusual position</h2>
            <div class="col-md-6 .col-md-offset-3">
                 <ul class="social">
                  <li class="facebook"><a href="#"><i class="fa fa-facebook fa-3x"></i></a></li>
                  <li class="twitter"><a href="#"><i class="fa fa-twitter fa-3x"></i></a></li>
                  <li class="pinterest"><a href="#"><i class="fa fa-google-plus fa-3x"></i></a></li>
                  <li class="behance"><a href="#"><i class="fa fa-linkedin fa-3x"></i></a></li>
                </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <h2 class="faceh2">You can edit this CSS if you want and if you need.</h2>
            <div class="col-md-6 .col-md-offset-3">
                 <ul class="social">
                  <li class="facebook"><a href="#"><i class="fa fa-facebook fa-3x"></i></a></li>
                  <li class="twitter"><a href="#"><i class="fa fa-twitter fa-3x"></i></a></li>
                  <li class="behance2"><a href="#"><i class="fa fa-linkedin fa-3x"></i></a></li>
                </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <h2 class="faceh2">Every Simple to USE with FONT AWESOME</h2>
            <div class="col-md-6 .col-md-offset-3">
                 <ul class="social">
                  <li class="facebook2"><a href="#"><i class="fa fa-facebook fa-3x"></i></a></li>
                  <li class="twitter2"><a href="#"><i class="fa fa-twitter fa-3x"></i></a></li>
                  <li class="behance3"><a href="#"><i class="fa fa-linkedin fa-3x"></i></a></li>
                </ul>
            </div>
          </div>
        </div>
      </div>
    

      <h4 class="centerclass">Rotate Social Icons </h4>
      <div class="col-md-12 text-center" style="padding-bottom:20px;">
        <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
        </ul>       
      </div>

      <div class="container">
        <div class="row">
          <div class="text-center">
            <h4>Sample Social Icons </h4>
            <!-- just add href= for your links, like this: -->
            <a href="http://facebook.com" class="btn btn-social-icon btn-facebook">
            <i class="fa fa-facebook"></i></a>    
            
            <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
            <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
            <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
            <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
            <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
            <a class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a>
            <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
            <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
            <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
            <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
            <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
          </div>
                    
          <div class="text-center">
            <h4>Sizes</h4>
            <a class="btn btn-social-icon btn-lg btn-vk"><i class="fa fa-facebook"></i></a>
            <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
            <a class="btn btn-social-icon btn-sm btn-facebook"><i class="fa fa-facebook"></i></a>
            <a class="btn btn-social-icon btn-xs btn-facebook"><i class="fa fa-facebook"></i></a>
          </div>       

          <div class="text-center">
            <h4>Icons with text</h4>
            <p>
               <a class="btn btn-social btn-facebook">
                  <i class="fa fa-facebook"></i> Sign in with Facebook
                </a>
            </p>
            <p>
               <a class="btn btn-social btn-facebook btn-lg">
                  <i class="fa fa-facebook"></i> Sign in with Facebook
                </a>
            </p>
          </div>       
        </div> 
      </div>