Missing Icons in ActionColumn with Bootstrap 4.3.x

[demonking]

With the Version 4 of Bootstrap, the icons were removed from the default library.

https://getbootstrap.com/docs/4.0/extend/icons/

What steps will reproduce the problem?

AppAsset:

            'yii\bootstrap4\BootstrapAsset',
            'yii\bootstrap4\BootstrapPluginAsset',

GridView:

   <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'name',
            'description:ntext',
            'image',

            [
                'class' => 'yii\grid\ActionColumn',
            ]
        ],
    ]); ?>

What's expected?

Seeing the icons in the last column of the gridview.

What do you get instead?

The css classes are not present in boostrap, so the icon's as not visible.

Additional info

Q	A
Yii version	2
PHP version	7.2
Operating system	Linux Debian Stretch

For the Moment I use the awesome font library and a function which creates the Buttons:

        function createActionButtons($buttons=['view','update','delete']){
                $actionButtons = [];
                $actionButtons['update']= function($url,$model) {
                         return Html::a('<i class="fa fa-edit"></i>', $url, [
                                 'title' => Yii::t('app', 'edit')
                         ]);
                };
                $actionButtons['delete'] = function($url,$model) {
                         return Html::a('<i class="fas fa-trash"></i>', $url, [
                                 'title' => Yii::t('app', 'delete')
                         ]);
                };
                $actionButtons['view'] = function($url,$model) {
                         return Html::a('<i class="fas fa-eye"></i>', $url, [
                                 'title' => Yii::t('app', 'view')
                         ]);
                };
                return array_intersect_key($actionButtons,array_flip($buttons));
        }

[samdark]

That is already mentioned in upgrade guide: https://github.com/yiisoft/yii2-bootstrap4/blob/master/docs/guide/migrating-yii2-bootstrap.md#basehtml

[samdark]

How would you fix it?

[simialbi]

Possible solution is using utf-8 Symbols instead of glyphicons in yii2 grid view like this: https://www.utf8icons.com/character/128065/eye https://www.utf8icons.com/character/128393/lower-left-pencil https://www.utf8icons.com/character/128465/wastebasket

Another alternative would be using the svg's from font awesome 5 free and mention them somewhere in the widget. They're downloadable: https://fontawesome.com/icons/eye?style=solid

[samdark]

How would you do that? Via overwriting widget factory configs?

[simialbi]

No. In core framework itself. I would change https://github.com/yiisoft/yii2/blob/master/framework/grid/ActionColumn.php#L182 which is bootstrap 3 specific and that's not so pretty

[samdark]

How would that work with bootstrap 3 then?

[simialbi]

the same way, inline svg of fa 5 or utf8 symbols... no glyphicons any more. If someone want to keep the glyphicons, he can override via container config

[samdark]

Is that possible to make it look the same as it is now this way?

[simialbi]

Not exactly, but with fa 5 icons nearby. Using this icons: https://fontawesome.com/icons/eye?style=solid https://fontawesome.com/icons/pencil-alt?style=solid https://fontawesome.com/icons/trash-alt?style=solid

[samdark]

Then it's an option...

[simialbi]

But I think you should move it to yii2. It's not a yii2-bootstrap or a yii2-bootstrap4 problem, is it?

[samdark]

Moved.

[rob006]

Related: https://github.com/yiisoft/yii-dataview/issues/10

[jai3232]

The easiest way is add the glyphicon to the Yii2. There is already yii2-bootstrap4-glyphicons by xtetis. You can the see sort icon in the GridView as well.

[imitronov]

.glyphicon {
    font-family: "Font Awesome 5 Free";
}
.glyphicon-eye-open:before {
    content: "\f06e";
    color: var(--success);
}
.glyphicon-pencil:before {
    content: "\f044";
    color: var(--primary);
}
.glyphicon-trash:before {
    content: "\f2ed";
    color: var(--danger);
}

[timz]

if remove button with content: "\f2ed"; doesn't work, then you can use content: "\f1f8";

[cadedduste]

Hi guys. What's the file that should I update with this? : .glyphicon { font-family: "Font Awesome 5 Free"; } .glyphicon-eye-open:before { content: "\f06e"; color: var(--success); } .glyphicon-pencil:before { content: "\f044"; color: var(--primary); } .glyphicon-trash:before { content: "\f2ed"; color: var(--danger); }

[imitronov]

@cadedduste web/css/site.css

[cadedduste]

@cadedduste web/css/site.css

Unluckily I can't make it work. I'm using yiiframework.com/extension/hail812/yii2-adminlte3 in my yii2 project. I've added that snippet in 'web/css/site.css' but icons are not showing. Did I miss something?

[imitronov]

@cadedduste web/css/site.css

Unlikely I can't make it work. I'm using yiiframework.com/extension/hail812/yii2-adminlte3 in my yii2 project. I've added that snippet in 'web/css/site.css' but icons are not showing. Did I miss something?

You need to link the CSS file / code with your template. See AssetBundle for Yii2.

[DeryabinSergey]

@cadedduste do you install https://github.com/rmrevin/yii2-fontawesome ?

[embula]

@cadedduste web/css/site.css

Unluckily I can't make it work. I'm using yiiframework.com/extension/hail812/yii2-adminlte3 in my yii2 project. I've added that snippet in 'web/css/site.css' but icons are not showing. Did I miss something?

I'm also using this theme and my [webvimark] user-management module display is not working well, especially the permissions page.

[KaungZawHtet]

Same problem here.