Jump to content

Customize Blog Page Pagination Arrows

Recommended Posts

I currently have custom arrows (png files I added to my site) for my older and newer blog posts. I used the following code to achieve this:

/*Custom Pagination Arrows*/
.item-pagination-icon svg {
  visibility: hidden;
.item-pagination-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
/*url icon for next button*/
.item-pagination-link--next .item-pagination-icon {
  background-image: url('https://static1.squarespace.com/static/6349d4f46e56b442e4aa8da4/t/65e91023a01fce319f721639/1709772835846/right-arrow+%281%29.png');
/*url icon for previous button*/
.item-pagination-link--prev .item-pagination-icon {
  background-image: url('https://static1.squarespace.com/static/6349d4f46e56b442e4aa8da4/t/65e9101c0f705c3fad22c824/1709772828912/left-arrow.png');

This works perfectly, but I am trying to create the same effect on my main blog page.  Any help would be much appreciated. 

Edited by marionnorton
Link to comment
  • Replies 2
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.