<section>
  <div class="row">
    <div class="container">
      <div class="col-sm-6 col-sm-offset-3">
        <nav>
          <ul>
            <li>
              <a href="#" data-name="Home">
                <i class="fa fa-home fa-2x"></i>
              </a>
            </li>
            <li>
              <a href="#" data-name="About">
                <i class="fa fa-bullhorn fa-2x"></i>
              </a>
            </li>
            <li>
              <a href="#" data-name="Services">
                <i class="fa fa-legal fa-2x"></i>
              </a>
            </li>
            <li>
              <a href="#" data-name="Blog">
                <i class="fa fa-folder-open-o fa-2x"></i>
              </a>
            </li>
            <li>
              <a href="#" data-name="Contact">
                <i class="fa fa-rocket fa-2x"></i>
              </a>
            </li>
          </ul>
        </nav>
      </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
-------------------------------------------------------------------*/

.row {
  margin: auto;
}

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

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

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

section {
    margin: 10px 0;
}

section .col-sm-6 {
    background: #ccc;
}

nav ul {
    margin: 20px 0; 
}

nav li {
    background: #ededed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
}

nav li:not(:first-child) {
    margin-top: 1px;
}

nav li a {
    outline: none;
    position: relative;
    width: 100%;
    height: 100%;
}

nav i {
    color: steelblue;
    vertical-align: middle;
}

nav li a:after {
    background: #ededed;
    content: attr(data-name);
    display: none;
    margin-left: 1px;
    width: 160px;
    height: 80px;
    left: 80px;
    position: absolute;
    font-size: 1.2em;
}

nav li a:hover:after {
    display: inline-block;
}

.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/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.