A Pen by Hans Spieß.

Enhance-Joomla-2.5-Pagination-with-Font-Awesome-Icons.markdown

Enhance Joomla 2.5 Pagination with Font Awesome Icons

The Implamantation of the Html in Joomla 2.5 is described in this gist.

A Pen by Hans Spieß. License.

index.html

<div class="pagination">
  <p class="counter">Seite 1 von 2</p>
  <ul>
    <li class="pagination-start">
      <span class="pagenav"> <i class="fa fa-fast-backward"></i>
      </span>
    </li>
    <li class="pagination-prev">
      <span class="pagenav"> <i class="fa fa-backward"></i>
      </span>
    </li>
    <li>
      <span class="pagenav">1</span>
    </li>
    <li>
      <a title="2" href="#" class="pagenav">2</a>
    </li>
    <li class="pagination-next">
      <a title="" href="#" class="pagenav">
        <i class="fa fa-forward"></i>
      </a>
    </li>
    <li class="pagination-end">
      <a title="" href="#" class="pagenav">
        <i class="fa fa-fast-forward"></i>
      </a>
    </li>
  </ul>
</div>

style.css

.counter {
  display: none;
}
.pagination > ul > li, .pagination span.pagenav, .pagination a.pagenav {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
}
.pagination a.pagenav {
  color: orange;
  text-decoration: none;
}
.pagination a.pagenav:hover {
  background-color: #c00418;
  color: white;
  text-decoration: none;
}
.pagination span.pagenav {
  color: orange;
}