Image or icon in a NavBar element

Yii 2.0 General Discussions
1

Hello, how can we display a Glyphicon in a NavBar element? Reading Bootstrap documentation I tried the following:


            echo Nav::widget([

                'options' => ['class' => 'navbar-nav navbar-left'],

                'items' => [

                    ['label' => Html::tag('span', '', ['class'=>'glyphicon glyphicon-chevron-right']).' OPTION 1', 'url' => '#'],

                ]

            ]);

But the "label" property seems to encode HTML so the output is not rendered as HTML. Any idea is really appreciated.

Thank you.

2

u can use below for icon and text together.


['label' => 'OPTION 1', 'options'=> ['class'=>'glyphicon glyphicon-chevron-right'],  'url' => ['#']];
3

Put "encodeLabels" option to false :




echo Nav::widget([

  'encodeLabels' => false,

  'options' => ['class' => 'navbar-nav navbar-left'],

  'items' => [

    ['label' => Html::tag('span', '', ['class'=>'glyphicon glyphicon-chevron-right']).' OPTION 1', 'url' => '#'],

  ]

]);
4

Hello guys,

@rups g: Your suggestion might work but Bootstrap documentation for Glyphicons recommends: Use only on empty elements and don’t mix it with other classes.

http://getbootstrap.com/components/#glyphicons-how-to-use

@Timmy78: That is great. I’m sorry I missed it from the docs. I was looking for a property like that inside the “items” property, for a per-item encoding configuration (like GridView.columns.format). But this component seems to be “all or nothing”.

Thank you both for your replies!