Joomla4 pagination issue in component on prev, next

Question

Facing problem in joomla pagination when component upgraded from joomla 3 to 4

with same css, although buttons are working in joomla 4 with click taking to prev, first on left side and on right side to next and last

Pls guide on what to do to have text writted as prev, first on left and next, last on right side

On checking source code coming as Coming as

<li class="disabled page-item">
        <span class="page-link" aria-hidden="true"><span class="icon-angle-double-left" aria-hidden="true"></span></span>
    </li>
            <li class="disabled page-item">
        <span class="page-link" aria-hidden="true"><span class="icon-angle-left" aria-hidden="true"></span></span>
    </li>

                            <li class="active page-item">
        <a aria-current="true" aria-label="Page 1" href="#" class="page-link">1</a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 2" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=20" class="page-link">
            2        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 3" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=40" class="page-link">
            3        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 4" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=60" class="page-link">
            4        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 5" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=80" class="page-link">
            5        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 6" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=100" class="page-link">
            6        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 7" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=120" class="page-link">
            7        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 8" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=140" class="page-link">
            8        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 9" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=160" class="page-link">
            9        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 10" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=180" class="page-link">
            10        </a>
    </li>
        
            <li class="page-item">
        <a aria-label="Go to next page" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=20" class="page-link">
            <span class="icon-angle-right" aria-hidden="true"></span>        </a>
    </li>
            <li class="page-item">
        <a aria-label="Go to end page" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=2800" class="page-link">
            <span class="icon-angle-double-right" aria-hidden="true"></span>        </a>
    </li>

Answer 1

The class names of those 4 buttons are probably not correct to get font awesome icons. You have:

<span class="icon-angle-double-left"
<span class="icon-angle-left"
<span class="icon-angle-right"
<span class="icon-angle-double-right"

I don't know which font awesome icon classes you need. You probably have to change <span class="icon-angle-left" to something like <span class="fa-solid fa-arrow-left"

You could do that via a template override for the pagination.php file.

Answer 2

I have a workaround that displays the text on the buttons after updating from Joomla 3 to 4.

I edited the link.php in /layouts/joomla/pagination/ and commented out the four lines that start with "$icon =".

Now the code looks like this:

// Check for "Start" item
case Text::_('JLIB_HTML_START'):
    //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-double-right' : 'icon-angle-double-left';
    $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
    break;

// Check for "Prev" item
case $item->text === Text::_('JPREV'):
    $item->text = Text::_('JPREVIOUS');
    //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-right' : 'icon-angle-left';
    $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
    break;

// Check for "Next" item
case Text::_('JNEXT'):
    //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-left' : 'icon-angle-right';
    $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
    break;

// Check for "End" item
case Text::_('JLIB_HTML_END'):
    //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-double-left' : 'icon-angle-double-right';
    $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
    break;

and the text on the buttons will be displayed.