Icons in bootstrap widgets

[nkovacs]

With Yiistrap, you could do this, for example:

    <?php echo TbHtml::buttonGroup(array(
        array('icon' => 'align-left'),
        array('icon' => 'align-center'),
        array('icon' => 'align-right'),
        array('icon' => 'align-justify'),
    )); ?>

with Yii 2, it's more complicated:

    echo \yii\bootstrap\ButtonGroup::widget([
        'encodeLabels' => false,
        'buttons' => [
            ['label' => '<span class="glyphicon glyphicon-align-left"></span>'],
            ['label' => '<span class="glyphicon glyphicon-align-center"></span>'],
            ['label' => '<span class="glyphicon glyphicon-align-right"></span>'],
            ['label' => '<span class="glyphicon glyphicon-align-justify"></span>'],
        ]
    ]);

If you want to have labels too, you have to concatenate and you should manually encode them too. This, plus all the html makes the code less readable compared to Yiistrap.

        echo \yii\bootstrap\Nav::widget([
        'encodeLabels' => false,
        'items' => [
            [
                'label' => '<span class="glyphicon glyphicon-home"></span> '
                    . Html::encode('Home'),
                'url' => ['site/index'],
            ],
            [
                'label' => Html::encode('Dropdown'),
                'items' => [
                    ['label' => '<span class="glyphicon glyphicon-cog"></span> ' . Html::encode('Level 1 - Dropdown A'), 'url' => '#'],
                    '<li class="divider"></li>',
                    '<li class="dropdown-header">Dropdown Header</li>',
                    ['label' => '<span class="glyphicon glyphicon-cog"></span> ' . Html::encode('Level 1 - Dropdown B'), 'url' => '#'],
                ],
            ],
        ],
    ]);

I have modified the yii2-bootstrap widgets to make it possible to do this:

    use yii\bootstrap\Icon;
    echo \yii\bootstrap\ButtonGroup::widget([
        'buttons' => [
            ['icon' => Icon::icon('align-left')],
            ['icon' => Icon::icon('align-center')],
            ['icon' => Icon::icon('align-right')],
            ['icon' => Icon::icon('align-justify')],
        ]
    ]);

    echo \yii\bootstrap\Nav::widget([
        'items' => [
            [
                'label' => 'Home',
                'icon' => Icon::icon('home'),
                'url' => ['site/index'],
            ],
            [
                'label' => 'Dropdown',
                'items' => [
                    ['label' => 'Level 1 - Dropdown A', 'icon' => Icon::icon('cog'), 'url' => '#'],
                    '<li class="divider"></li>',
                    '<li class="dropdown-header">Dropdown Header</li>',
                    ['label' => 'Level 1 - Dropdown B', 'icon' => Icon::icon('cog'), 'url' => '#'],
                ],
            ],
        ],
    ]);

Note: the reason for using Icon::icon('foo') instead of just 'foo' is to be able to change the icon to font awesome or any other plugin which uses different css classes.

[kartik-v]

Suppose the original idea with the inbuilt yii2-bootstrap was to avoid building php code for simple HTML markup except for complex markup where widgets are available. Probably the yii core team may validate this or explain this better. Regarding usage of icons, I think bootstrap by default only supports glyphicons. But then, developers tend to combine other css frameworks and icon packages as well, as you mentioned. Hence, the code in current yii bootstrap extension needs to be scalable to accept more such situations to auto generate the html markup. (probably the reason maybe the original idea to allow any HTML markup).

I remember creating a separate yii2-icons extension - to manage and use icon frameworks across Yii - which is discussed to some extent here, along with bootstrap html helpers. But I think it depends on what is more easier or scalable for each developer.

[kartik-v]

Referring an old related discussion #1285 on this.

[nkovacs]

The main issue I have is that the label is supposed to be a simple string, it's even html encoded by default. Adding an icon to it right now is cumbersome and feels like a hack, because you have to disable the automatic encoding (and then manually encode, depending on where the text comes from).

[patlecat]

Please also add the ability to add icons to the NavBar and in particular to the brandLabel which actually prohibits the placement of anything else but text!

[nkovacs]

The items in a navbar are rendered by Nav, and I've added icon support to that. brandLabel is not html encoded, so it's not an issue there, but I could add a brandIcon property as well, I think the code would look nicer.

Right now you can do:

NavBar::begin([
    'brandLabel' => Icon::icon('cog') . ' ' . Yii::t('app', 'My awesome app'),
]);

With brandIcon it would look like this:

NavBar::begin([
    'brandIcon' => Icon::icon('cog'),
    'brandLabel' => Yii::t('app', 'My awesome app'),
]);

[patlecat]

Both look cool, thanks. Most important is to document it all though! :)

[gb5256]

@nkovacs what is the status of this one? Your solution seems to be fantastic and as I run right now in exactly the situation you describe (lots of buttons in a button group) this would hep me a lot.
But this is not merged into master yet, is it?

[nkovacs]

No, it's not. The Yii devs have to review and merge it.

[nkovacs]

A couple of things:

• I have not added brandIcon yet.
• Icon could be a simple helper class instead of a Widget (nkovacs@2e65db9#commitcomment-9133553), not sure which approach is better.

[klimov-paul]

yiisoft/yii2-bootstrap#31

[nkovacs]

Why did you not just take my version? There are several problems with your implementation:

• The label should not be required if you specify an icon (Nav, Dropdown, etc).
• The default label for button should be empty, so you don't have to override it every time you want an icon only button. See my buttongroup example.
• The icon can only be glyphicon. You can't easily add a third party icon library.
• You left out collapse.

[klimov-paul]

Why did you not just take my version?

To be honest I have missed it. Sorry.
Still, I suppose introduction of the Icon widget as you suggest overcomplicates things. Such solution can be used actually, but in this case introduction of 'icon' option for the widgets does not make much sense - it is just better to use label composition.

The label should not be required if you specify an icon

Fair point - fixed.

The default label for button should be empty, so you don't have to override it every time you want an icon only button. See my buttongroup example.

I am usure, if this can be done now, since it may be a BC break.

The icon can only be glyphicon. You can't easily add a third party icon library.

For thirdparty icon library you should use raw label composition just as for any non bootstrap widget.

You left out collapse

Actually for the icons it is unlikely to be used in collaplse, but alright I have add it.

[nkovacs]

Still, I suppose introduction of the Icon widget as you suggest overcomplicates things. Such solution can be used actually, but in this case introduction of 'icon' option for the widgets does not make much sense - it is just better to use label composition.
For thirdparty icon library you should use raw label composition just as for any non bootstrap widget.

Then this feature will not be very useful to me, and I'm back to square one, having to extend all the widgets to hack on proper icon support.

[klimov-paul]

That is not yet decided.

[klimov-paul]

The icon can only be glyphicon. You can't easily add a third party icon library.

I have manage to bypass this: you will be able to specify icon as composed HTML.

[klimov-paul]

Another implementation: yiisoft/yii2-bootstrap#32

[klimov-paul]

Migrated to yiisoft/yii2-bootstrap#42