Icon Animation (Outline)

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>