Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use bootstrap glyphicon icons in yii2 pagination for prev and next button?

I want to use bootstrap glyphicon icons in Yii2 pagination for prev and next button. I've set their css class in the bellow code, but it didn't work. It shows the icon but not in right place and without a link to it.

'pager' => [
        'options'          => ['class'=>'pagination'],   // set clas name used in ui list of pagination
        'prevPageLabel'    => '>',   // Set the label for the "previous" page button
        'nextPageLabel'    => '<',   // Set the label for the "next" page button
        'firstPageLabel'   => '>>',   // Set the label for the "first" page button
        'lastPageLabel'    => '<<',    // Set the label for the "last" page button
        'nextPageCssClass' => 'next',    // Set CSS class for the "next" page button
        'prevPageCssClass' => 'perv',    // Set CSS class for the "previous" page button
        'firstPageCssClass'=> 'first',    // Set CSS class for the "first" page button
        'lastPageCssClass' => 'last',    // Set CSS class for the "last" page button
        'maxButtonCount'   => 10,    // Set maximum number of page buttons that can be displayed
    ],
like image 357
B nM Avatar asked Apr 07 '16 05:04

B nM


1 Answers

You can add icons using <span>:

For example,

'pager' => [
    'options'          => ['class'=>'pagination'],   // set clas name used in ui list of pagination
    'prevPageLabel'    => '<span class="glyphicon glyphicon-chevron-left"></span>',
    'nextPageLabel'    => '<span class="glyphicon glyphicon-chevron-right"></span>',
    'firstPageLabel'   => '<span class="glyphicon glyphicon-fast-backward"></span>',
    'lastPageLabel'    => '<span class="glyphicon glyphicon-fast-forward"></span>',
    'nextPageCssClass' => 'next',    // Set CSS class for the "next" page button
    'prevPageCssClass' => 'prev',    // Set CSS class for the "previous" page button
    'firstPageCssClass'=> 'first',    // Set CSS class for the "first" page button
    'lastPageCssClass' => 'last',    // Set CSS class for the "last" page button
    'maxButtonCount'   => 10,    // Set maximum number of page buttons that can be displayed
],
like image 147
Insane Skull Avatar answered Sep 30 '22 01:09

Insane Skull