Jump to content

Custom icon for portfolio pagination arrows?

Recommended Posts

Does anyone know how to format custom CSS to change the arrow icons and location for portfolio pagination? I've been able to add previous and next and remove the basic arrows, but I'd prefer to have slimmer arrows above the project title instead of having previous and next.

Link to site: https://www.dbender-creative.com/workplace/leadership-alignment

I've attached an image of what the pagination looks like now and a couple of images showing the icon style I'd like to have instead. For clarification, I'd like the arrow to sit above the project title in place of previous/next.

Current pagination.png

Desired arrow icon.png

More complex option.png

Link to comment
  • Replies 4
  • Views 779
  • Created
  • Last Reply

Top Posters In This Topic

22 hours ago, BenderDC said:

@tuanphan Thank you! I've attached PNGs for a left and right arrow.

Slim Arrow-Left.png

Slim Arrow-Right.png

Add to Design > Custom CSS

a.item-pagination-link.item-pagination-link--prev .item-pagination-prev-next:before {
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_05/SlimArrow-Left.png.160374ad8d239709f3f136f5102f6c1f.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    width: 50px;
    height: 10px;
}
a.item-pagination-link.item-pagination-link--next .item-pagination-prev-next:after {
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_05/SlimArrow-Right.png.11d77ad9f9a290c9de22a7227598f031.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    width: 50px;
    height: 10px;
}

image.thumb.png.f476f611bc93feda682f69fd7e5fe148.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.