Skip to content
Snippets Groups Projects
Open Searchkit arrows don't match in size
  • View options
  • Searchkit arrows don't match in size

  • View options
  • Open Issue created by Bradley Taylor

    Here the next button icon is about double the size of the previous arrow icon, which does not look intentional:

    Screenshot_2025-03-23_at_14.34.41

    These buttons use unicode ⬅️ and ⮕ to render the icons.

    It seems like it's a unicode bug that these often don't match, but it does appear to be font-dependant: https://stackoverflow.com/questions/9490578/why-dont-more-all-of-unicodes-right-and-left-arrows-match-in-particular-the

    The easiest solution is probably for Riverlea to just replace the icons with a background image. e.g.:

    .pagination-next a {
      text-indent: -9999px;
      width: 30px;
      background: arrow.svg;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yOC4yOSAxNi4wN2wtMTAuNzUtMTAuNzVhMSAxIDAgMCAwLTEuNDEgMS40MWw4LjA5IDguMDlIMy41YTEgMSAwIDAgMCAwIDJoMjAuMjJsLTguMDkgOC4wOWExIDEgMCAwIDAgMS40MSAxLjQxbDEwLjc1LTEwLjc1YTEgMSAwIDAgMC0uMDEtMS40MXoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=");
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: center;
    }

    (That's not the best SVG, but demonstrates the idea)

    From an accessibility perspective, I doubt the unicode ⮕ is read out nicely by assistive tech. As such, I feel like the actual button text should just be "previous" and "next", leaving themes fully responsible for adding any icons.

    Edited by Bradley Taylor
    • Merge request
    • Branch

    Linked items ... 0

  • Activity

    • All activity
    • Comments only
    • History only
    • Newest first
    • Oldest first
    Loading Loading Loading Loading Loading Loading Loading Loading Loading Loading