如何在yii2分页中使用bootstrap glyphicon图标为prev和下一个按钮?

时间:2016-04-07 05:49:54

标签: gridview twitter-bootstrap-3 pagination yii2

我想在Yii2分页中使用bootstrap glyphicon图标作为prev和next按钮。我已经在下面的代码中设置了他们的css类,但它没有用。它显示图标但不在正确的位置,没有链接。

'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
    ],

1 个答案:

答案 0 :(得分:4)

您可以使用<span>添加图标:

例如,

'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
],