Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing Icons in ActionColumn with Bootstrap 4.3.x #17479

Open
demonking opened this issue Jul 30, 2019 · 14 comments
Open

Missing Icons in ActionColumn with Bootstrap 4.3.x #17479

demonking opened this issue Jul 30, 2019 · 14 comments

Comments

@demonking
Copy link

@demonking demonking commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

@samdark

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

How would you fix it?

@simialbi

This comment has been minimized.

Copy link
Contributor

@simialbi simialbi commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

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

@simialbi

This comment has been minimized.

Copy link
Contributor

@simialbi simialbi commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

How would that work with bootstrap 3 then?

@simialbi

This comment has been minimized.

Copy link
Contributor

@simialbi simialbi commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

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

@simialbi

This comment has been minimized.

@samdark

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

Then it's an option...

@simialbi

This comment has been minimized.

Copy link
Contributor

@simialbi simialbi commented Jul 30, 2019

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

@samdark samdark transferred this issue from yiisoft/yii2-bootstrap4 Jul 30, 2019
@samdark

This comment has been minimized.

Copy link
Member

@samdark samdark commented Jul 30, 2019

Moved.

@rob006

This comment has been minimized.

Copy link
Member

@rob006 rob006 commented Aug 4, 2019

@jai3232

This comment has been minimized.

Copy link

@jai3232 jai3232 commented Jan 2, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.