Sort (asc and desc) icons are broken

adamwinn commented 5 years ago

Prerequisites

[x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
[x] The issue still exists against the latest master branch of yii2-dynagrid.
[x] This is not an usage question. I confirm having gone through and read the documentation and demos.
[x] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
[ ] I have attempted to find the simplest possible steps to reproduce the issue.
[ ] I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

When using dynagrid and clicking on a header to sort, the asc/desc icon shows up as a weird box. This doesn't happen on the demo page.

use yii\helpers\Html;
use yii\helpers\Url;
use kartik\dynagrid\DynaGrid;
use kartik\grid\GridView;
use kartik\icons\Icon;
Icon::map($this, Icon::FAS);
use yii\widgets\Breadcrumbs;
use kartik\icons\FontAwesomeAsset;
FontAwesomeAsset::register($this);

<div class="event-items-index">

<?php

echo DynaGrid::widget([
    'storage'=>DynaGrid::TYPE_DB,
    'columns' => $columns,
    'theme'=>'panel-primary',
    'showPersonalize'=>true,
    'gridOptions'=>[
        'pjaxSettings' => [
            'loadingCssClass' => false,
        ],
        'condensed'=>true,
        'striped'=>true,
        'pjax'=>true,
        'dataProvider'=>$dataProvider,
        'filterModel'=>$searchModel,
        'panel'=>[
            'heading'=>Icon::show('list-alt').'  Event Items',
            'before' => Html::button(Icon::show('upload').'Upload Store Qtys', ['type'=>'button', 'title'=>'Upload Store Qtys', 'class'=>'btn btn-outline-primary']).'&nbsp;&nbsp;'.
                        Html::button(Icon::show('plus').'Add Item', ['type'=>'button', 'title'=>'Add Item', 'class'=>'btn btn-outline-primary']).'&nbsp;&nbsp;'.
                        Html::button(Icon::show('file-excel').'Create Output File', ['type'=>'button', 'title'=>'Create Output File', 'class'=>'btn btn-outline-primary'])
        ],
        'toolbar' =>  [
            ['content'=>''],
            ['content'=>'{pager}&nbsp;'.Html::a(Icon::show('redo'), ['/event-item?event_id='.$event_model->event_id], ['data-pjax'=>0, 'class' => 'btn btn-outline-secondary', 'title'=>'Reset Grid']).'&nbsp;{dynagridFilter}&nbsp;{dynagridSort}&nbsp;{dynagrid}&nbsp;{export}'],
        ]
    ],
    'options'=>['id'=>'event-item-grid'] // a unique identifier is important
]);

actual behavior

browser console

Browsers

[x] Google Chrome
[x] Mozilla Firefox
[ ] Internet Explorer
[ ] Safari

Operating System

[ ] Windows
[x] Mac OS X
[ ] Linux
[ ] Mobile

Libraries

jQuery version: v3.2.1
yii2-dynagrid version: dev-master 16b9f2b

Isolating the problem

[ ] This bug happens on the demos page
[x] The bug happens consistently across all tested browsers
[ ] This bug happens when using yii2-dynagrid without other plugins.

adamwinn commented 5 years ago

I fixed this by doing

Option 1: Font CSS version of Font Awesome:

<!-- on your view layout file HEAD section -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

I had previously done the alternative part to Option 2, as shown in my setup above, but that didn't work

    Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.

    // on your view layout file
    use kartik\icons\FontAwesomeAsset;
    FontAwesomeAsset::register($this);

kartik-v commented 5 years ago

Yes its because Yii2 grid by default uses the CSS method to inject the SORT / FILTER ICON content in the css ::after pseudo for the table header title. So using Font Awesome CSS will work.

If using FontAwesomeAsset (where it uses Font awesome JS and SVG) - you need to write your own JS code or additional css to embed the icons.

kartik-v / yii2-dynagrid