<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <ul class="list-inline">
          <a href="#" title="Like us!">
            <i class="fa fa-facebook fa-2x"></i>
          </a>
          <a href="#" title="Tweet us!">
            <i class="fa fa-twitter fa-2x"></i>
          </a>
          <a href="#" title="Connect wih us!">
            <i class="fa fa-linkedin fa-2x"></i>
          </a>
          <a href="#" title="Code with us!">
            <i class="fa fa-git fa-2x"></i>
          </a>
          <a href="mailto:xx@xx.com" title="Mail us!">
            <i class="fa fa-envelope-o fa-2x"></i>
          </a>
        </ul>      
      </div>
    </div>
	</div>
</section>

<p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon" target="_blank">See article</a>.</p>
/*------------------------------------------------------------------
      						RESET STYLES
-------------------------------------------------------------------*/

ul {
    list-style: none;
    padding: 0;
}

a {	
	display: inline-block;
	text-decoration: none;
}

/*------------------------------------------------------------------
      						SECTION STYLES
-------------------------------------------------------------------*/

section { 
    margin: 50px 0;
}

section ul {
	text-align: center;
}

section a {
	padding: 7px;
    color: black;
}

section a:not(:first-child) {
	margin-left: 20px;
}

section i {
	vertical-align: middle;
	transition: color .3s ease-in-out;	
}

section a:nth-child(1):hover i {
	color: #3B5998;
}

section a:nth-child(2):hover i {
	color: #4099FF;
}

section a:nth-child(3):hover i {
	color: #007bb6;
}

section a:nth-child(4):hover i {
	color: #ccc;
}

section a:nth-child(5):hover i {
	color: steelblue;
}

.p {
  text-align: center;
  margin-top: 120px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.