Yii2: bootstrap nav icon

Created on 9 Apr 2014  路  18Comments  路  Source: yiisoft/yii2

I want to add icon on the menu, but it's not working. I tried this:

$menuItems[] = ['icon' => 'icon-fa-comments icon-3x','label'=>'','url' => ['#']];
...
echo Nav::widget(['items' => $menuItems ]);
...

tried this way also:
$menuItems[] = ['label'=>"< span class="glyphicon glyphicon-star" >

question

Most helpful comment

echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'encodeLabels' => false,
    'items' => [
        ['label' => '<span class="glyphicon glyphicon-home"></span> Home', 'url' => ['/site/index']],
        ['label' => '<span class="glyphicon glyphicon-phone-alt"></span> About', 'url' => ['/site/about']],
        ['label' => '<span class="glyphicon glyphicon-envelope"></span> Contact', 'url' => ['/site/contact']],
        Yii::$app->user->isGuest ?
            ['label' => '<span class="glyphicon glyphicon-user"></span> Login', 'url' => ['/site/login']] :
            ['label' => '<span class="glyphicon glyphicon-off"></span> Logout (' . Html::encode(Yii::$app->user->identity->username) . ')',
                'url' => ['/site/logout'],
                'linkOptions' => ['data-method' => 'post']],
    ],
]);

All 18 comments

what error is displayed?

you mean something like this ['class' => 'glyphicon glyphicon-eye-open'] ?
instead ['icon' => 'icon-fa-comments icon-3x'

No any error, just not showing any icon.
this code is not helping: ['class' => 'glyphicon glyphicon-eye-open']

echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'encodeLabels' => false,
    'items' => [
        ['label' => '<span class="glyphicon glyphicon-home"></span> Home', 'url' => ['/site/index']],
        ['label' => '<span class="glyphicon glyphicon-phone-alt"></span> About', 'url' => ['/site/about']],
        ['label' => '<span class="glyphicon glyphicon-envelope"></span> Contact', 'url' => ['/site/contact']],
        Yii::$app->user->isGuest ?
            ['label' => '<span class="glyphicon glyphicon-user"></span> Login', 'url' => ['/site/login']] :
            ['label' => '<span class="glyphicon glyphicon-off"></span> Logout (' . Html::encode(Yii::$app->user->identity->username) . ')',
                'url' => ['/site/logout'],
                'linkOptions' => ['data-method' => 'post']],
    ],
]);

screenshot 41

ok, the problem was "encodeLabels" option was true. so, it was showing the tags as a simple text. Thank you!

Don't forget to escape your labels with Html::encode if these are formed dynamically.

邪褏邪, 褋锌邪褋懈斜芯

hey.. i have problem like this. is there any solution relevant to this..? i get html code instead of icon.

screenshot_2

NavBar::begin([
'brandLabel' => 'logo',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'top-menu navbar-inverse navbar-fixed-top',
'encodeLabels' => false,
],
]);

$menuItems[] = ['label' => 'Notification', 'linkOptions' =>['class'=>'notify'], 'items' => [

                ['label' => '<span class="glyphicon glyphicon-home"></span> Reviews', 'url' => '?r=my-account/notification&type=reviews',],
                ['label' => 'Requirements', 'url' => '?r=my-account/notification&type=requirements'],
               ['label' => 'Quotes', 'url' => '?r=my-account/notification&type=quotes'],
                ]];
        NavBar::end();

As I see it, "encodeLabels" should not be put in the "options" array. It is a direct property of the "Nav" Widget (which NavBar inherits from).

Have a look at http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html#$encodeLabels-detail

Thanks for your respond. actually i m new in Yii .
i have put 'encodeLables' out side like :

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\helpers\Url;
use yii\db\Query;

        NavBar::begin([
            'brandLabel' =>  '<img alt="logo" src="images/logo.png">',
            'brandUrl' => Yii::$app->homeUrl,

            'options' => [
                'class' => 'top-menu navbar-inverse navbar-fixed-top',
            ],
           'encodeLabels' => false,
        ]);

But its showing error something like this : " Setting unknown property: yii\bootstrap\NavBar::encodeLabels " will u please guide me or provide me any demo code.?

Thank you

I'm sorry. NavBar does not inherit from Nav. My bad...

But following the example on http://www.yiiframework.com/doc-2.0/yii-bootstrap-navbar.html

It should look like this:

use yii\bootstrap\NavBar;
use yii\widgets\Menu;

NavBar::begin(['brandLabel' => 'NavBar Test']);
echo Nav::widget([
    'encodeLabels' => true,
    'items' => [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
    ],
]);
NavBar::end();

Thank You @fortex

Hey @fortex :+1: , finally i got solution. i made mistake in putting 'encodeLables' only. i correct it as you said. thanks dude
screenshot_4

you set 'encodeLabels' => false

What about collapsed items?

how can i use toggle button for hiding the left menu in yii2 ?

_This is an automated comment, triggered by adding the label question._

Please note, that the GitHub Issue Tracker is for bug reports and feature requests only.

We are happy to help you on the support forum, on IRC (#yii on freenode), or Gitter.

Please use one of the above mentioned resources to discuss the problem.
If the result of the discussion turns out that there really is a bug in the framework, feel free to
come back and provide information on how to reproduce the issue. This issue will be closed for now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

njasm picture njasm  路  44Comments

alexandernst picture alexandernst  路  163Comments

rosancoderian picture rosancoderian  路  46Comments

cebe picture cebe  路  53Comments

Mirocow picture Mirocow  路  56Comments