add a working with icons example

frees us up to not have to encourage so much markup throughout these pagination examples
This commit is contained in:
Mark Otto 2016-12-28 14:43:49 -08:00 committed by Mark Otto
parent 2b6276f685
commit 5ec35d800d
1 changed files with 5 additions and 3 deletions

View File

@ -30,8 +30,12 @@ In addition, as pages likely have more than one such navigation section, it's ad
</nav>
{% endexample %}
## Working with icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility.
{% example html %}
<nav aria-label="Page navigation">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
@ -42,8 +46,6 @@ In addition, as pages likely have more than one such navigation section, it's ad
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>