<section>
  <div class="row">
    <div class="container">
      <div class="col-sm-12">
        <ul>
          <li>
            <span class="icon-pencil"></span>
            Analyze
          </li>
          <li> + </li>
          <li>
            <span class="icon-paint-format"></span>
            Design
          </li>
          <li> + </li>
          <li>
            <span class="icon-mug"></span>
            Develop
          </li>
          <li> + </li>
          <li>
            <span class="icon-rocket"></span>
            Deploy
          </li>
        </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
-------------------------------------------------------------------*/

.row {
  margin: auto;
}

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

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

section { 
    margin: 50px 0;
}

section ul li {
	 float: left;
	 height: 126px;
	 text-transform: uppercase;
    color: steelblue;
    width: 20.5%;
    text-align: center;
    cursor: pointer;
}

section li:nth-child(even) {  
    color: #ededed;
    width: 6%;
    font-size: 2.5em;
    height: 63px;
    margin-top: 31.5px;
    line-height: 63px;
}

section span {
 	padding: 15px 0;
	 font-size: 5em;
    display: block;
    color: steelblue;
    transition: all .2s ease-in-out;
}

section li:hover span {
    transform: translateY(-10px);
}

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

@font-face {
	font-family: 'icomoon';
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon.eot?8pq1w');
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon.eot?#iefix8pq1w') format('embedded-opentype'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon.woff?8pq1w') format('woff'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon.ttf?8pq1w') format('truetype'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon.svg?8pq1w#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-pencil:before {
	content: "\e600";
}
.icon-paint-format:before {
	content: "\e601";
}
.icon-mug:before {
	content: "\e602";
}
.icon-rocket:before {
	content: "\e603";
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.