https://www.toptal.com/designers/htmlarrows/

         <ul class="pagination">
          
	          <c:if test="${map.pager.curBlock  > 1 }">
	              <li>
	              <a aria-label="Previous" href="javascript:list('${pageAndSearch.searchQuery(1) }')">
	               <span aria-hidden="true">&laquo;</span>
	             </a>
	             </li>
	          </c:if>
          
	          <c:if test="${map.pager.curBlock  > 1 }">
		           <li>
		             <a aria-label="Previous" href="javascript:list('${pageAndSearch.searchQuery(map.pager.prevPage) }')">
		               <span aria-hidden="true">&lsaquo;</span>
		             </a>
		           </li>
	           </c:if>

	         <c:forEach begin="${ map.pager.blockBegin }"  end="${ map.pager.blockEnd }" var="page">
	          	<c:choose>
	          		<c:when test="${ page ==map.pager.curPage }">
	          			<li class="active"> 
	           		  <a href="javascript:list('${pageAndSearch.searchQuery(page) }')" >${page}</a>
	           		</li>
	          		</c:when>
	          		<c:otherwise>
	          			<li > 
	           		  <a href="javascript:list('${pageAndSearch.searchQuery(page) }')" >${page}</a>
	           		</li>	
	          		</c:otherwise>
	          	</c:choose>
	         </c:forEach>
   
		   <c:if test="${ map.pager.curBlock < map.pager.totBlock }">
	           <li>
	             <a  class="arrow next" aria-label="Next" href="javascript:list('${ pageAndSearch.searchQuery(map.pager.nextPage) }')">
	               <span aria-hidden="true">&rsaquo;</span>
	             </a>
	           </li>
	       </c:if> 
	       
	       
	       <c:if test="${map.pager.curPage < map.pager.totPage }">
	         <li>
	             <a  class="arrow nnext"  aria-label="Next" href="javascript:list('${ pageAndSearch.searchQuery(map.pager.totPage) }')">
	               <span aria-hidden="true">&raquo;</span>
	             </a>
	           </li>
	       </c:if>    
         </ul>