Foundation 5 Pagination Styles

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="pagination-centered">
   <ul class="pagination">
       <li class="arrow unavailable"><a href=""><i class="fa fa-long-arrow-left"></i></a></li>
      <li class="current"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li class="unavailable"><a href="">&hellip;</a></li>
      <li><a href="">12</a></li>
      <li><a href="">13</a></li>
      <li class="arrow"><a href=""><i class="fa fa-long-arrow-right"></i></a></li>
   </ul>
</div>

CSS

body {padding: 30px; }

ul.pagination {
  display: block;
  min-height: 1.5rem;
  margin-left: -0.04125rem; }
  ul.pagination li {
    height: 1.5rem;
    color: #222222;
    font-size: 1.875rem;
    margin-left: 0.04125rem; }
    ul.pagination li a, ul.pagination li button {
      display: block;
      padding: 0.0925rem 0.925rem 0.0925rem;
      background: #3A3E45;
      color: #FFFFFF;
      border-radius: 0px;
      font-weight: normal;
      font-size: 1.1em;
      line-height: inherit;
      transition: background-color 300ms ease-out; }
    ul.pagination li:hover a,
    ul.pagination li a:focus, ul.pagination li:hover button,
    ul.pagination li button:focus {
      background: #34495E; }
    ul.pagination li.unavailable a, ul.pagination li.unavailable button {
      cursor: default;
      color: #FFF; }
    ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus, ul.pagination li.unavailable:hover button, ul.pagination li.unavailable button:focus {
      background: #3A3E45; }
    ul.pagination li.current a, ul.pagination li.current button {
      background: #34495E;
      color: #FFFFFF;
      font-weight: normal;
      cursor: default; }
      ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus {
        background: #34495E; }
  ul.pagination li {
    float: left;
    display: block; }

/* Pagination centred wrapper */
.pagination-centered {
  text-align: center; }
  .pagination-centered ul.pagination li {
    float: none;
    display: inline-block; }

JavaScript

$(document).foundation();